@acorex-platform/module-conversation-client 0.0.63 → 0.0.65

package/fesm2022/{acorex-platform-module-conversation-client-acorex-platform-module-conversation-client-CmRULmpl.mjs → acorex-platform-module-conversation-client-acorex-platform-module-conversation-client-Be9CB1WQ.mjs}

@@ -1,5 +1,5 @@
 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, normalizeStoredImageRef, isStoredImageFileId, AXP_MENU_PROVIDER, AXP_SETTING_DEFINITION_PROVIDER, AXP_SEARCH_PROVIDER } from '@acorex-platform/framework-client/common';
+import { AXPFilterOperatorMiddlewareService, AXPSearchCommandProvider, createEntityCommandOptions, AXP_PROTECTED_ROUTE_GUARDS, AXPBackgroundOperationHandler, AXP_BACKGROUND_OPERATION_HANDLERS, AXPSettingsService, AXPCommonSettings, AXPFileStorageService, normalizeStoredImageRef, isStoredImageFileId, AXP_MENU_PROVIDER, AXP_SETTING_DEFINITION_PROVIDER, AXP_SEARCH_PROVIDER } from '@acorex-platform/framework-client/common';
 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';
@@ -12,13 +12,13 @@ import { CommonModule, DOCUMENT, AsyncPipe, NgTemplateOutlet, isPlatformBrowser,
 import * as i0 from '@angular/core';
 import { inject, Injectable, signal, DestroyRef, input, computed, ChangeDetectionStrategy, Component, ElementRef, Injector, output, viewChild, afterNextRender, effect, untracked, InjectionToken, Directive, ViewContainerRef, EnvironmentInjector, ViewEncapsulation, PLATFORM_ID, NgZone, NgModule } from '@angular/core';
 import { Router, ActivatedRoute, NavigationEnd, ROUTES } from '@angular/router';
-import { RootConfig, axmIsCommentRoom, AXPCollaborationPermissionKeys, AXPConversationMenuKeys, AXMMiniChatSettings, AXPConversationQueryKeys, AXPConversationCommandKeys, AXM_COMMENT_LIKE_EMOJI, CHANNEL_POST_ENTITY_NAME, axmIsChannelRoom, AXM_CONVERSATION_ANNOUNCEMENT_FEED_ITEM_META_KEY, AXM_CONVERSATION_ANNOUNCEMENT_MESSAGE_TYPE, AXM_CONVERSATION_CHANNEL_POST_ID_META_KEY, axmIsAnnouncementChannel, axmAnnouncementChannelMetadata, AXM_CONVERSATION_ANNOUNCEMENT_CHANNEL_NAME, axmAiChatConversationUiMetadata as axmAiChatConversationUiMetadata$1, axmMessagesAfterId, axmChannelPostIdFromMessage, extractMessageTextFromPayload, AXMPermissionsKeys } from '@acorex-platform/module-conversation-client/contracts';
+import { RootConfig, axmIsCommentRoom, AXPCollaborationPermissionKeys, AXPConversationMenuKeys, AXMMiniChatSettings, AXPConversationQueryKeys, AXPConversationCommandKeys, AXM_REALTIME_TOPIC_CONVERSATION_COMMENT, AXM_COMMENT_LIKE_EMOJI, CHANNEL_POST_ENTITY_NAME, axmIsChannelRoom, AXM_CONVERSATION_ANNOUNCEMENT_FEED_ITEM_META_KEY, AXM_CONVERSATION_ANNOUNCEMENT_MESSAGE_TYPE, AXM_CONVERSATION_CHANNEL_POST_ID_META_KEY, axmIsAnnouncementChannel, axmAnnouncementChannelMetadata, AXM_CONVERSATION_ANNOUNCEMENT_CHANNEL_NAME, axmAiChatConversationUiMetadata as axmAiChatConversationUiMetadata$1, axmMessagesAfterId, axmChannelPostIdFromMessage, extractMessageTextFromPayload, AXMPermissionsKeys } from '@acorex-platform/module-conversation-client/contracts';
 import { AXPCommonMenuKeys, AXPCommonPermissionGroupKeys } from '@acorex-platform/module-common-client/contracts';
 import { axmAiChatConversationUiMetadata, axmBuildHeuristicConversationTitleFallback, axmCompareMessagesChronologically, AXM_CONTEXTUAL_ASSIST_KIND_ENTITY_RECORD, AXM_ASSIST_LAUNCH_CONTEXT_METADATA_KEY, axmExtractAssistLaunchContextFromMetadata, axmSanitizeContextualAssistContext, AXM_CONTEXTUAL_ASSIST_ACTION_ENTITY_RECORD, RootConfig as RootConfig$1 } from '@acorex-platform/module-conversation-client/contracts';
 import { coerceUnknownToTrimmedString, runtimeQueryCollectionData, AXPWidgetsList, runtimeQueryObjectData, resolveMultiLanguageString, coerceUnknownToMultiLanguageString, AXP_QUERY_QUICK_SEARCH_FIELD, AXPPlatformScope, AXPFileStorageStatus, runtimeCommandPayloadData, createRandomUuid, AXPRegionalSetting } from '@acorex-platform/framework-shared/core';
 import { trim, isEmpty, get, isNil, isString, orderBy } from 'lodash';
 import { AXConversationUserApi, AXConversationApi, AXConversationMessageApi, AXConversationRealtimeApi, AX_CONVERSATION_DEFAULT_ROOM_PREFERENCES, AXConversationService, AXConversationComposerService, AXConversationContainerDirective, AXConversationInfoBarComponent, AXConversationMessageListComponent, AXConversationComposerComponent, AXConversationNewDialogComponent, AXConversationInfoBarService, AXConversationSidebarComponent, AXConversationComposerGenerationStateService, AX_CONVERSATION_ERROR_HANDLER_CONFIG, provideConversation, AX_CONVERSATION_ITEM_MUTE_ACTION, AX_CONVERSATION_ITEM_PIN_ACTION, AX_CONVERSATION_ITEM_MARK_READ_ACTION, AX_CONVERSATION_ITEM_DIVIDER, AX_CONVERSATION_ITEM_DELETE_ACTION, AX_CONVERSATION_INFO_BAR_SEARCH_ACTION, AX_CONVERSATION_INFO_BAR_MUTE_ACTION, AX_CONVERSATION_INFO_BAR_DIVIDER, AX_CONVERSATION_INFO_BAR_DELETE_ACTION, AX_CONVERSATION_TAB_ALL, AX_CONVERSATION_TAB_PRIVATE, AX_CONVERSATION_TAB_GROUPS, AX_CONVERSATION_MESSAGE_REPLY_ACTION, AX_CONVERSATION_MESSAGE_FORWARD_ACTION, AX_CONVERSATION_MESSAGE_EDIT_ACTION, AX_CONVERSATION_MESSAGE_DELETE_ACTION, AX_CONVERSATION_IMAGE_RENDERER, AX_CONVERSATION_VIDEO_RENDERER, AX_CONVERSATION_AUDIO_RENDERER, AX_CONVERSATION_VOICE_RENDERER, AX_CONVERSATION_FILE_RENDERER, AX_CONVERSATION_LOCATION_RENDERER, AX_CONVERSATION_STICKER_RENDERER } from '@acorex/components/conversation';
-import { isWatchablePresenceUserId, AXPUserPresenceService, AXPRealtimeConnectionService, AXPRealtimeConnectionPort, AXPRealtimeDispatcherService, AXP_REALTIME_TOPIC_CONVERSATION_MESSAGE, AXP_REALTIME_TOPIC_CONVERSATION_TYPING, AXP_REALTIME_TOPIC_ENTITY_MUTATION, AXP_REALTIME_TOPIC_CONVERSATION_CALL } from '@acorex-platform/framework-client/realtime';
+import { isWatchablePresenceUserId, AXPUserPresenceService, AXPRealtimeDispatcherService, AXPRealtimeConnectionService, AXPRealtimeConnectionPort, AXP_REALTIME_TOPIC_CONVERSATION_MESSAGE, AXP_REALTIME_TOPIC_CONVERSATION_TYPING, AXP_REALTIME_TOPIC_ENTITY_MUTATION, AXP_REALTIME_TOPIC_CONVERSATION_CALL } from '@acorex-platform/framework-client/realtime';
 import { PRESENCE_USER_CHAT_LAST_SEEN, resolveEntityActionCommandInput, entityActionDataRecord, defineCommand, AXP_COMMAND_DEFINITION_CATEGORY_UTILITY } from '@acorex-platform/framework-shared/runtime';
 import { BehaviorSubject, Subject, filter, map, pairwise, merge, distinctUntilChanged, interval, skip, switchMap, from, firstValueFrom } from 'rxjs';
 import { takeUntilDestroyed, toSignal } from '@angular/core/rxjs-interop';
@@ -3217,23 +3217,137 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                 }]
         }] });
 
+//#region ---- Imports ----
+//#endregion
+//#region ---- Realtime snapshot mapping ----
+/** Maps a comment socket snapshot onto the thread model, without nested replies. */
+function axmCommentFromRealtimePayload(payload) {
+    const messageId = payload.messageId?.trim() ?? '';
+    const conversationId = payload.conversationId?.trim() ?? '';
+    const message = axmHydrateRealtimeConversationMessage(payload.message, messageId, conversationId);
+    if (!message?.id || !message.conversationId) {
+        return null;
+    }
+    return {
+        ...message,
+        id: message.id,
+        conversationId: message.conversationId,
+        senderId: message.senderId,
+        timestamp: axmCoerceDate(message.timestamp),
+        editedAt: message.editedAt ? axmCoerceDate(message.editedAt) : undefined,
+        deletedAt: message.deletedAt ? axmCoerceDate(message.deletedAt) : undefined,
+        reactions: (message.reactions ?? []).map((reaction) => ({
+            ...reaction,
+            timestamp: axmCoerceDate(reaction.timestamp),
+        })),
+        replyTo: message.replyTo?.id ? { id: message.replyTo.id } : undefined,
+        depth: 0,
+        replies: [],
+        replyCount: 0,
+    };
+}
+//#endregion
+
+//#region ---- Imports ----
+//#endregion
+//#region ---- Abstract service ----
 class AXMCommentRealtimeService {
 }
+//#endregion
+//#region ---- Implementation ----
 class AXMCommentRealtimeServiceImpl extends AXMCommentRealtimeService {
+    //#endregion
     constructor() {
-        super(...arguments);
+        super();
+        //#region ---- Services & Dependencies ----
+        this.dispatcher = inject(AXPRealtimeDispatcherService, { optional: true });
+        this.connection = inject(AXPRealtimeConnectionService, { optional: true });
+        //#endregion
+        //#region ---- State ----
         this._comment$ = new Subject();
         this.comment$ = this._comment$.asObservable();
         this._thread$ = new Subject();
         this.thread$ = this._thread$.asObservable();
+        this.watchedThreads = new Map();
+        this.remoteHandlerRegistered = false;
+        this.registerRemoteHandler();
     }
+    //#region ---- Local publish ----
     notifyComment(event) {
         this._comment$.next(event);
     }
     notifyThread(event) {
         this._thread$.next(event);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXMCommentRealtimeServiceImpl, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    //#endregion
+    //#region ---- Thread subscription ----
+    watchThread(threadId) {
+        const id = threadId?.trim();
+        if (!id) {
+            return;
+        }
+        const next = (this.watchedThreads.get(id) ?? 0) + 1;
+        this.watchedThreads.set(id, next);
+        if (next === 1) {
+            this.connection?.subscribeConversation(id);
+        }
+    }
+    unwatchThread(threadId) {
+        const id = threadId?.trim();
+        if (!id) {
+            return;
+        }
+        const current = this.watchedThreads.get(id) ?? 0;
+        if (current <= 1) {
+            this.watchedThreads.delete(id);
+            this.connection?.unsubscribeConversation(id);
+            return;
+        }
+        this.watchedThreads.set(id, current - 1);
+    }
+    //#endregion
+    //#region ---- Socket handler ----
+    registerRemoteHandler() {
+        if (this.remoteHandlerRegistered || !this.dispatcher) {
+            return;
+        }
+        this.remoteHandlerRegistered = true;
+        this.dispatcher.register({
+            topic: AXM_REALTIME_TOPIC_CONVERSATION_COMMENT,
+            handle: (envelope) => {
+                this.applyRemotePayload(envelope.payload);
+            },
+        });
+    }
+    applyRemotePayload(payload) {
+        const messageId = payload?.messageId?.trim() ?? '';
+        const threadId = payload?.conversationId?.trim() ?? '';
+        const op = payload?.op;
+        if (!messageId || !threadId || !op) {
+            return;
+        }
+        if ((this.watchedThreads.get(threadId) ?? 0) < 1) {
+            return;
+        }
+        if (op === 'deleted') {
+            this.notifyComment({ type: 'remove', payload: messageId, threadId });
+            return;
+        }
+        const comment = payload ? axmCommentFromRealtimePayload(payload) : null;
+        if (!comment) {
+            return;
+        }
+        if (comment.deleted) {
+            this.notifyComment({ type: 'remove', payload: messageId, threadId });
+            return;
+        }
+        this.notifyComment({
+            type: op === 'created' ? 'add' : 'update',
+            payload: comment,
+            threadId,
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXMCommentRealtimeServiceImpl, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXMCommentRealtimeServiceImpl, providedIn: 'root' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXMCommentRealtimeServiceImpl, decorators: [{
@@ -3241,7 +3355,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
             args: [{
                     providedIn: 'root',
                 }]
-        }] });
+        }], ctorParameters: () => [] });
 
 //#region ---- Comment Management Service ----
 class AXMCommentManagementService {
@@ -3341,6 +3455,10 @@ class AXMCommentManagementService {
         }
         return this.formatThread(room);
     }
+    /** Room row only, so the view can join realtime before messages are loaded. */
+    findThreadRoom(entityRef, topic) {
+        return this.commentImplService.getThread(entityRef, topic);
+    }
     async countCommentsForEntity(entityRef) {
         const rooms = await this.commentImplService.listRoomsForEntity(entityRef);
         let total = 0;
@@ -3379,7 +3497,7 @@ class AXMCommentManagementService {
         const author = userId ? await this.getUserInfo(userId) : this.getCurrentUser();
         const rawComment = await this.commentImplService.addComment(threadId, content, author, parentCommentId, contentType);
         const formattedComment = this.formatComment(rawComment);
-        this.realtimeService.notifyComment({ type: 'add', payload: formattedComment });
+        this.emitComment('add', formattedComment);
         return formattedComment;
     }
     async getComments(threadId, nested) {
@@ -3398,13 +3516,21 @@ class AXMCommentManagementService {
         const editor = this.getCurrentUser();
         const rawComment = await this.commentImplService.editComment(commentId, content, editor, contentType);
         const formattedComment = this.formatComment(rawComment);
-        this.realtimeService.notifyComment({ type: 'update', payload: formattedComment });
+        this.emitComment('update', formattedComment);
         return formattedComment;
     }
     async deleteComment(commentId) {
+        let threadId = '';
+        try {
+            const existing = await this.commentImplService.getComment(commentId);
+            threadId = existing.conversationId?.trim() ?? '';
+        }
+        catch {
+            threadId = '';
+        }
         const result = await this.commentImplService.deleteComment(commentId);
         if (result) {
-            this.realtimeService.notifyComment({ type: 'remove', payload: commentId });
+            this.realtimeService.notifyComment({ type: 'remove', payload: commentId, threadId });
         }
         return result;
     }
@@ -3423,7 +3549,7 @@ class AXMCommentManagementService {
         ];
         const rawComment = await this.commentImplService.updateReactions(commentId, updatedReactions);
         const formattedComment = this.formatComment(rawComment);
-        this.realtimeService.notifyComment({ type: 'update', payload: formattedComment });
+        this.emitComment('update', formattedComment);
         return formattedComment;
     }
     async removeReaction(commentId, emoji) {
@@ -3432,7 +3558,7 @@ class AXMCommentManagementService {
         const updatedReactions = (comment.reactions || []).filter((r) => !(r.userId === author.id && r.emoji === emoji));
         const rawComment = await this.commentImplService.updateReactions(commentId, updatedReactions);
         const formattedComment = this.formatComment(rawComment);
-        this.realtimeService.notifyComment({ type: 'update', payload: formattedComment });
+        this.emitComment('update', formattedComment);
         return formattedComment;
     }
     getReactions(commentId) {
@@ -3449,15 +3575,24 @@ class AXMCommentManagementService {
     async pinComment(commentId) {
         const rawComment = await this.commentImplService.pinComment(commentId, true);
         const formattedComment = this.formatComment(rawComment);
-        this.realtimeService.notifyComment({ type: 'update', payload: formattedComment });
+        this.emitComment('update', formattedComment);
         return formattedComment;
     }
     async unpinComment(commentId) {
         const rawComment = await this.commentImplService.pinComment(commentId, false);
         const formattedComment = this.formatComment(rawComment);
-        this.realtimeService.notifyComment({ type: 'update', payload: formattedComment });
+        this.emitComment('update', formattedComment);
         return formattedComment;
     }
+    //#endregion
+    //#region ---- Realtime publish ----
+    emitComment(type, comment) {
+        this.realtimeService.notifyComment({
+            type,
+            payload: comment,
+            threadId: comment.conversationId,
+        });
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXMCommentManagementService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXMCommentManagementService, providedIn: 'root' }); }
 }
@@ -12364,28 +12499,6 @@ function createConversationServiceSessionAdapter(service) {
 }
 //#endregion
 
-//#region ---- Comment in-app notification helper ----
-function buildCommentInAppNotificationRequest(thread, comment, receiver) {
-    const body = axmExtractTextFromPayload(comment.payload) || 'New comment';
-    return {
-        id: `comment-in-app:${comment.id}`,
-        name: thread.title || 'Comment',
-        title: thread.title || 'New comment',
-        body,
-        icon: 'fa-light fa-comment',
-        priority: 'Notice',
-        receiver,
-        data: {
-            threadId: thread.id,
-            entityTypeId: thread.entityRef?.entityTypeId,
-            entityId: thread.entityRef?.entityId,
-            moduleName: thread.entityRef?.moduleName,
-            entityName: thread.entityRef?.entityName,
-        },
-    };
-}
-//#endregion
-
 //#region ----- Imports -----
 //#endregion
 //#region ----- Constants -----
@@ -12431,6 +12544,9 @@ class AXMCommentComponent {
         this.commentActions = signal([], /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "commentActions" }] : /* istanbul ignore next */ []));
         this.refreshGeneration = 0;
+        this.liveRevision = 0;
+        this.watchedThreadId = null;
+        this.realtimeReady = false;
         //#endregion
         //#region ----- View Children -----
         this.commentsView = viewChild('commentsView', { ...(ngDevMode ? { debugName: "commentsView" } : /* istanbul ignore next */ {}), read: AXCommentViewComponent });
@@ -12440,12 +12556,10 @@ class AXMCommentComponent {
         //#region ----- Services & Dependencies -----
         this.commentService = inject(AXMCommentManagementService);
         this.realtimeService = inject(AXMCommentRealtimeService);
+        this.realtimeConnection = inject(AXPRealtimeConnectionService, { optional: true });
         this.sessionService = inject(AXPSessionService);
         this.toastService = inject(AXToastService);
         this.dialogService = inject(AXDialogService);
-        this.inAppNotificationService = inject(AXP_IN_APP_NOTIFICATION_SERVICE, {
-            optional: true,
-        });
         this.activatedRoute = inject(ActivatedRoute);
         this.translationService = inject(AXTranslationService);
         this.destroyRef = inject(DestroyRef);
@@ -12460,9 +12574,19 @@ class AXMCommentComponent {
         this.moduleName.set(this.activatedRoute.snapshot.params['module'] || null);
         this.entityName.set(this.activatedRoute.snapshot.params['entity'] || null);
         void this.initialize();
+        this.destroyRef.onDestroy(() => {
+            if (this.watchedThreadId) {
+                this.realtimeService.unwatchThread(this.watchedThreadId);
+                this.watchedThreadId = null;
+            }
+        });
         this.realtimeService.comment$
-            .pipe(takeUntilDestroyed(this.destroyRef), filter((event) => !!event))
+            .pipe(takeUntilDestroyed(this.destroyRef), filter((event) => {
+            const threadId = this.thread()?.id;
+            return !!event?.threadId && !!threadId && event.threadId === threadId;
+        }))
             .subscribe((event) => {
+            this.liveRevision++;
             switch (event.type) {
                 case 'add':
                     void this.handleAddComment(event.payload);
@@ -12475,6 +12599,16 @@ class AXMCommentComponent {
                     break;
             }
         });
+        this.realtimeConnection?.connectionStatus$
+            .pipe(pairwise(), filter(([previous, current]) => previous !== 'connected' && current === 'connected'), takeUntilDestroyed(this.destroyRef))
+            .subscribe(() => {
+            if (!this.realtimeReady || this.isLoading() || !this.thread()?.id) {
+                return;
+            }
+            void this.applyServerComments().catch((error) => {
+                console.error('Failed to refresh comments after reconnect:', error);
+            });
+        });
     }
     //#endregion
     //#region ----- Data Loading -----
@@ -12482,6 +12616,7 @@ class AXMCommentComponent {
         await this.loadActionItems();
         await this.loadComments();
         this.isLoading.set(false);
+        this.realtimeReady = true;
     }
     async loadComments() {
         try {
@@ -12491,17 +12626,17 @@ class AXMCommentComponent {
                 moduleName: this.moduleName(),
                 entityName: this.entityName(),
             };
-            const thread = await this.commentService.getThread(entityRef, this.subject());
-            if (thread) {
-                this.thread.set(thread);
-                this.comments.set(thread.comments || []);
+            const room = await this.commentService.findThreadRoom(entityRef, this.subject());
+            if (room) {
+                this.thread.set({ ...room, comments: [], commentCount: 0 });
+                this.bindRealtimeThread(room.id);
             }
             else {
                 const newThread = await this.commentService.createThread(entityRef, this.subject());
                 this.thread.set(newThread);
-                this.comments.set(newThread.comments || []);
+                this.bindRealtimeThread(newThread.id);
             }
-            await this.refreshItems();
+            await this.applyServerComments();
         }
         catch (error) {
             console.error('Failed to load comments:', error);
@@ -12750,10 +12885,15 @@ class AXMCommentComponent {
     //#endregion
     //#region ----- Realtime Event Handlers -----
     async handleAddComment(comment) {
-        if (comment.senderId !== this.getCurrentUser()?.id && this.thread()) {
-            void this.inAppNotificationService?.create(buildCommentInAppNotificationRequest(this.thread(), comment, this.sessionService.user));
+        if (containsComment(this.comments(), comment.id)) {
+            await this.handleUpdateComment(comment);
+            return;
         }
         const parentId = comment.replyTo?.id;
+        if (parentId && !containsComment(this.comments(), parentId)) {
+            await this.applyServerComments();
+            return;
+        }
         if (parentId) {
             this.expandReplies(parentId);
             this.comments.update((comments) => insertReply(comments, parentId, comment));
@@ -12764,6 +12904,10 @@ class AXMCommentComponent {
         await this.refreshItems();
     }
     async handleUpdateComment(updatedComment) {
+        if (!containsComment(this.comments(), updatedComment.id)) {
+            await this.handleAddComment(updatedComment);
+            return;
+        }
         const update = (list) => list.map((c) => {
             if (c.id === updatedComment.id) {
                 return {
@@ -12789,17 +12933,49 @@ class AXMCommentComponent {
         return user ? { id: user.id, type: 'user' } : null;
     }
     async removeMessageById(commentId) {
+        if (this.editing()?.id === commentId) {
+            this.cancelEdit();
+        }
+        if (this.replyingTo()?.id === commentId) {
+            this.cancelReply();
+        }
         const filterOut = (comments) => comments
             .filter((c) => c.id !== commentId)
             .map((c) => {
-            if (c.replies?.length) {
-                return { ...c, replies: filterOut(c.replies) };
+            if (!c.replies?.length) {
+                return c;
             }
-            return c;
+            const replies = filterOut(c.replies);
+            return { ...c, replies, replyCount: replies.length };
         });
         this.comments.update((comments) => filterOut(comments));
         await this.refreshItems();
     }
+    bindRealtimeThread(threadId) {
+        const next = threadId.trim();
+        if (!next || this.watchedThreadId === next) {
+            return;
+        }
+        if (this.watchedThreadId) {
+            this.realtimeService.unwatchThread(this.watchedThreadId);
+        }
+        this.watchedThreadId = next;
+        this.realtimeService.watchThread(next);
+    }
+    async applyServerComments(attempt = 0) {
+        const threadId = this.thread()?.id;
+        if (!threadId || attempt > 3) {
+            return;
+        }
+        const seen = this.liveRevision;
+        const comments = await this.commentService.getComments(threadId, true);
+        if (seen !== this.liveRevision || this.thread()?.id !== threadId) {
+            await this.applyServerComments(attempt + 1);
+            return;
+        }
+        this.comments.set(comments);
+        await this.refreshItems();
+    }
     readEditorHtml() {
         const service = this.editor()?.getEditorService();
         if (service && !service.isEmpty()) {
@@ -12821,6 +12997,11 @@ class AXMCommentComponent {
             return;
         }
         this.commentItems.set(items);
+        // The installed comment view can ignore a replaced datasource until reloadData
+        // copies it into the list that the template actually renders.
+        setTimeout(() => {
+            void this.commentsView()?.reloadData();
+        });
     }
     async mapComment(comment) {
         const profile = await this.resolveProfile(comment.senderId);
@@ -12917,7 +13098,7 @@ class AXMCommentComponent {
         this.showToast(content, color);
     }
     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: "commentsView", first: true, predicate: ["commentsView"], descendants: true, read: AXCommentViewComponent, isSignal: true }, { propertyName: "commentContainer", first: true, predicate: ["commentContainer"], descendants: true, read: AXCommentContainerComponent, isSignal: true }, { propertyName: "editor", first: true, predicate: ["commentEditor"], descendants: true, read: AXTextEditorComponent, isSignal: true }], ngImport: i0, template: "<div class=\"axm-comment\">\n  <ax-comment-container #commentContainer>\n    <!-- ----- Loading skeleton while comments are fetched ----- -->\n    @if (isLoading()) {\n      <div class=\"axm-comment__list axm-comment__list--loading\">\n        @for (skeleton of [0, 1, 2]; track skeleton) {\n          <div class=\"axm-comment__skeleton\" [class.axm-comment__skeleton--compact]=\"skeleton > 0\">\n            <ax-skeleton class=\"size-9 shrink-0 rounded-full\"></ax-skeleton>\n            <div class=\"axm-comment__skeleton-body\">\n              <ax-skeleton class=\"h-3.5 w-28 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              <!--------------------------------------------------------------->\n              <!-- ----- Extra skeleton line on first row ----- -->\n              @if (skeleton === 0) {\n                <ax-skeleton class=\"h-3 w-2/3 rounded-full\"></ax-skeleton>\n              }\n            </div>\n          </div>\n        }\n      </div>\n    }\n    <!-- ----- Empty state when the thread has no comments ----- -->\n    @else if (comments().length === 0) {\n      <div class=\"axm-comment__empty\">\n        <axp-state-message\n          icon=\"fa-light fa-comments\"\n          [title]=\"'@conversation:comments.components.comment.empty-states.no-comments.title'\"\n          [description]=\"'@conversation:comments.components.comment.empty-states.no-comments.description'\"\n        ></axp-state-message>\n      </div>\n    }\n    <!-- ----- Comment thread from the mapped datasource ----- -->\n    @else {\n      <div class=\"axm-comment__list\">\n        <ax-comment-view #commentsView [datasource]=\"commentItems()\" (onReply)=\"onReply($event)\" (onLikeChange)=\"onLikeChange($event)\" (onRepliesToggle)=\"onRepliesToggle($event)\" (onAction)=\"onAction($event)\">\n          <ng-template axCommentItem let-item>\n            <div class=\"flex min-w-0 items-start gap-2\">\n              <axp-user-avatar class=\"shrink-0\" [size]=\"42\" [userId]=\"commentSenderId(item)\" [axpUserCard]=\"commentSenderId(item)\"></axp-user-avatar>\n              <div class=\"min-w-0 flex-1\">\n                <div class=\"flex min-w-0 items-center justify-between gap-2\">\n                  <div class=\"flex min-w-0 flex-wrap items-center\">\n                    <ax-title [axpUserCard]=\"commentSenderId(item)\">{{ item.author }}</ax-title>\n                    <!--------------------------------------------------------------->\n                    <!-- ----- You badge for the current user's comment ----- -->\n                    @if (item.isYou) {\n                      <ax-badge class=\"ax-sm ax-pill ax-comment-you-badge\" look=\"twotone\" color=\"primary\" [text]=\"('@acorex:comment.you' | translate | async) ?? 'You'\"></ax-badge>\n                    }\n                    <!--------------------------------------------------------------->\n                    <!-- ----- Edited label (before timestamp) ----- -->\n                    @if (item.edited) {\n                      <ax-comment-edited [editedAt]=\"item.editedAt\" />\n                    }\n                    <!--------------------------------------------------------------->\n                    <!-- ----- Relative timestamp for this comment ----- -->\n                    @if (item.date) {\n                      <ax-comment-date>{{ item.date }}</ax-comment-date>\n                    }\n                  </div>\n                  <!--------------------------------------------------------------->\n                  <!-- ----- Overflow menu from item actions ----- -->\n                  @if (item.actions?.length) {\n                    <ax-dropdown-button class=\"ax-sm\" mode=\"dropdown\" look=\"blank\" [iconOnly]=\"true\" [text]=\"('@conversation:comments.actions.more' | translate | async) ?? ''\">\n                      <ax-prefix>\n                        <ax-icon icon=\"ax-icon ax-icon-more-horizontal\"></ax-icon>\n                      </ax-prefix>\n                      <ax-button-item-list>\n                        @for (action of item.actions; track action.name ?? action.text) {\n                          <ax-button-item [text]=\"action.text\" [color]=\"action.color\" (onClick)=\"onOverflowAction(item, action.name ?? action.text)\">\n                            <!--------------------------------------------------------------->\n                            <!-- ----- Action icon when the menu item has one ----- -->\n                            @if (action.icon) {\n                              <ax-prefix>\n                                <ax-icon [icon]=\"action.icon\"></ax-icon>\n                              </ax-prefix>\n                            }\n                          </ax-button-item>\n                        }\n                      </ax-button-item-list>\n                    </ax-dropdown-button>\n                  }\n                </div>\n                <ax-content>\n                  <div [innerHTML]=\"item.content\"></div>\n                </ax-content>\n              </div>\n            </div>\n          </ng-template>\n        </ax-comment-view>\n      </div>\n    }\n\n    <ax-footer style=\"padding: 0.1rem\">\n      <!-- ----- Edit context above the composer ----- -->\n      @if (editing(); as editItem) {\n        <div class=\"axm-comment__context-bar\" tabindex=\"0\" (click)=\"scrollToCommentContext(editItem)\" (keydown.enter)=\"scrollToCommentContext(editItem)\" (keydown.space)=\"$event.preventDefault(); scrollToCommentContext(editItem)\">\n          <div class=\"axm-comment__context-bar-body\">\n            <i class=\"fa-light fa-pen axm-comment__context-bar-icon\" aria-hidden=\"true\"></i>\n            <span class=\"axm-comment__context-bar-copy\">\n              <span class=\"axm-comment__context-bar-label\">{{ '@conversation:comments.actions.edit-message' | translate | async }}</span>\n              @if (commentContextPreview(editItem.content); as preview) {\n                <span class=\"axm-comment__context-bar-preview\" [title]=\"preview\">{{ preview }}</span>\n              }\n            </span>\n          </div>\n          <button type=\"button\" class=\"axm-comment__context-bar-close\" (click)=\"$event.stopPropagation(); cancelEdit()\" [attr.aria-label]=\"('@conversation:comments.actions.cancel.title' | translate | async) ?? 'Cancel'\">\n            <i class=\"fa-light fa-xmark\" aria-hidden=\"true\"></i>\n          </button>\n        </div>\n      }\n      <!-- ----- Reply context above the composer ----- -->\n      @else if (replyingTo(); as replyItem) {\n        <div class=\"axm-comment__context-bar\" tabindex=\"0\" (click)=\"scrollToCommentContext(replyItem)\" (keydown.enter)=\"scrollToCommentContext(replyItem)\" (keydown.space)=\"$event.preventDefault(); scrollToCommentContext(replyItem)\">\n          <div class=\"axm-comment__context-bar-body\">\n            <i class=\"fa-light fa-reply axm-comment__context-bar-icon\" aria-hidden=\"true\"></i>\n            <span class=\"axm-comment__context-bar-copy\">\n              <span class=\"axm-comment__context-bar-label\">\n                {{ '@conversation:comments.actions.reply-to' | translate | async }}\n                <span class=\"axm-comment__context-bar-name\">\n                  @if (replyItem.isYou) {\n                    {{ '@acorex:comment.you' | translate | async }}\n                  } @else {\n                    {{ replyItem.author }}\n                  }\n                </span>\n              </span>\n              @if (commentContextPreview(replyItem.content); as preview) {\n                <span class=\"axm-comment__context-bar-preview\" [title]=\"preview\">{{ preview }}</span>\n              }\n            </span>\n          </div>\n          <button type=\"button\" class=\"axm-comment__context-bar-close\" (click)=\"$event.stopPropagation(); cancelReply()\" [attr.aria-label]=\"('@conversation:comments.actions.cancel.title' | translate | async) ?? 'Cancel'\">\n            <i class=\"fa-light fa-xmark\" aria-hidden=\"true\"></i>\n          </button>\n        </div>\n      }\n\n      <ax-comment-reply>\n        <ax-text-editor\n          #commentEditor\n          look=\"solid\"\n          outputFormat=\"html\"\n          [initialLine]=\"3\"\n          [ngModel]=\"draft()\"\n          (ngModelChange)=\"draft.set($event)\"\n          [placeHolder]=\"((editing() ? '@conversation:comments.actions.edit-message' : replyingTo() ? '@conversation:comments.composer.reply-placeholder' : '@conversation:comments.composer.placeholder') | translate | async) ?? ''\"\n        >\n          <ax-footer>\n            <div class=\"axm-comment__editor-actions\">\n              <ax-button\n                class=\"axm-comment__send ax-sm\"\n                look=\"solid\"\n                color=\"primary\"\n                [disabled]=\"hasCooldown() || isCommentDraftEmpty() || isSubmitting()\"\n                [text]=\"(editing() ? '@conversation:comments.actions.edit.title' : '@conversation:comments.actions.send.title') | translate | async\"\n                (onClick)=\"submitComment()\"\n              >\n                @if (isSubmitting()) {\n                  <ax-loading></ax-loading>\n                } @else {\n                  <!-- ----- Send icon when not submitting ----- -->\n                  <ax-prefix>\n                    <ax-icon icon=\"fa-light fa-paper-plane-top\"></ax-icon>\n                  </ax-prefix>\n                }\n              </ax-button>\n            </div>\n          </ax-footer>\n          <ax-text-editor-toolbar class=\"border-b\">\n            <ax-text-editor-history></ax-text-editor-history>\n            <ax-divider></ax-divider>\n            <ax-text-editor-font-style></ax-text-editor-font-style>\n            <ax-divider></ax-divider>\n            <ax-text-editor-colors></ax-text-editor-colors>\n            <ax-divider></ax-divider>\n            <ax-text-editor-list></ax-text-editor-list>\n            <ax-divider></ax-divider>\n            <ax-text-editor-alignment></ax-text-editor-alignment>\n          </ax-text-editor-toolbar>\n        </ax-text-editor>\n      </ax-comment-reply>\n    </ax-footer>\n  </ax-comment-container>\n</div>\n", styles: ["@layer properties;:host{display:block;height:100%;min-height:0px;width:100%}ax-comment-container{display:flex;flex-direction:column;justify-content:space-between;height:100%}.axm-comment{display:flex;width:100%;height:100%;min-height:0px;flex-direction:column;overflow:hidden;background-color:rgb(var(--ax-sys-color-lightest-surface))}.axm-comment .axm-comment__list{min-height:0px;flex:1;overflow-y:auto;padding:1rem 1rem 1.25rem;scroll-behavior:smooth}.axm-comment .axm-comment__list.axm-comment__list--loading{display:flex;flex-direction:column;gap:1.25rem}.axm-comment .axm-comment__empty{display:flex;min-height:min(16rem,40vh);flex:1;flex-direction:column;align-items:center;justify-content:center;padding:2rem 1.25rem}.axm-comment .axm-comment__skeleton{display:flex;align-items:flex-start;gap:.75rem}.axm-comment .axm-comment__skeleton.axm-comment__skeleton--compact .axm-comment__skeleton-body{gap:.375rem}.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__context-bar{display:flex;min-width:0px;cursor:pointer;align-items:flex-start;gap:calc(var(--spacing, .25rem) * 2);margin-block-end:8px;padding:.5rem .75rem;border:1px solid rgb(var(--ax-sys-color-border-light-surface));border-radius:6px;border-inline-start:3px solid rgb(var(--ax-sys-color-primary-surface));background-color:rgba(var(--ax-sys-color-primary-lightest-surface),.4);font-size:.8125rem;line-height:1.45}.axm-comment .axm-comment__context-bar:hover{background-color:rgba(var(--ax-sys-color-primary-lightest-surface),.55)}.axm-comment .axm-comment__context-bar:focus-visible{outline:2px solid rgb(var(--ax-sys-color-primary-surface));outline-offset:2px}.axm-comment .axm-comment__context-bar-body{display:flex;min-width:0px;flex:1;align-items:flex-start;text-align:start;gap:.625rem;overflow:hidden;pointer-events:none}.axm-comment .axm-comment__context-bar-icon{flex-shrink:0;font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));--tw-leading: 1;line-height:1;margin-top:.125rem;color:rgb(var(--ax-sys-color-primary-surface))}.axm-comment .axm-comment__context-bar-copy{display:flex;min-width:0px;flex:1;flex-direction:column;gap:.125rem;overflow:hidden}.axm-comment .axm-comment__context-bar-label{flex-shrink:0;font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));--tw-leading: calc(var(--spacing, .25rem) * 4);line-height:calc(var(--spacing, .25rem) * 4);color:rgb(var(--ax-sys-color-neutral-700-surface, 55 65 81))}.axm-comment .axm-comment__context-bar-name{--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);color:rgb(var(--ax-sys-color-neutral-900-surface, 17 24 39))}.axm-comment .axm-comment__context-bar-preview{min-width:0px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:start;font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));--tw-leading: calc(var(--spacing, .25rem) * 4);line-height:calc(var(--spacing, .25rem) * 4);color:rgb(var(--ax-sys-color-neutral-600-surface, 107 114 128))}.axm-comment .axm-comment__context-bar-close{position:relative;z-index:1;display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;align-self:flex-start;border-radius:var(--radius-sm, .25rem);width:1.75rem;height:1.75rem;margin-inline-start:-.25rem;padding:0;border:none;background:transparent;color:rgb(var(--ax-sys-color-neutral-500-surface, 107 114 128));font-size:1rem;line-height:1;cursor:pointer}.axm-comment .axm-comment__context-bar-close:hover{background-color:rgba(var(--ax-sys-color-neutral-100-surface, 243 244 246),.9);color:rgb(var(--ax-sys-color-neutral-700-surface, 55 65 81))}.axm-comment .axm-comment__context-bar-close:focus-visible{outline:2px solid rgb(var(--ax-sys-color-primary-surface));outline-offset:2px}.axm-comment .axm-comment__editor-actions{display:flex;align-items:center;justify-content:flex-end;gap:calc(var(--spacing, .25rem) * 2);padding:var(--spacing, .25rem)}.axm-comment .axm-comment__send{min-width:5.5rem}@property --tw-leading{syntax: \"*\"; inherits: false;}@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-leading: initial;--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", "line", "initialLine", "maxLine"], 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.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", inputs: ["datasource", "itemTemplate"], outputs: ["datasourceChange", "onReply", "onLikeChange", "onRepliesToggle", "onAction"] }, { kind: "component", type: i4.AXCommentContainerComponent, selector: "ax-comment-container" }, { kind: "component", type: i4.AXCommentReplyComponent, selector: "ax-comment-reply", inputs: ["item"], outputs: ["onClose", "onTargetClick"] }, { kind: "component", type: i4.AXCommentDateComponent, selector: "ax-comment-date" }, { kind: "component", type: i4.AXCommentEditedComponent, selector: "ax-comment-edited", inputs: ["editedAt"] }, { kind: "directive", type: i4.AXCommentItemTemplateDirective, selector: "ng-template[axCommentItem]" }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: i1.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }, { 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: AXDropdownButtonModule }, { kind: "component", type: i7.AXDropdownButtonComponent, selector: "ax-dropdown-button", inputs: ["disabled", "size", "text", "selected", "color", "look", "type", "mode", "iconOnly"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "lookChange", "colorChange", "disabledChange"] }, { kind: "ngmodule", type: AXLoadingModule }, { kind: "component", type: i8.AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "context"], outputs: ["visibleChange"] }, { kind: "ngmodule", type: AXTranslationModule }, { 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: "component", type: AXPStateMessageComponent, selector: "axp-state-message", inputs: ["mode", "icon", "title", "description", "titleParams", "descriptionParams", "look"] }, { 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: "pipe", type: i1$2.AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    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: "commentsView", first: true, predicate: ["commentsView"], descendants: true, read: AXCommentViewComponent, isSignal: true }, { propertyName: "commentContainer", first: true, predicate: ["commentContainer"], descendants: true, read: AXCommentContainerComponent, isSignal: true }, { propertyName: "editor", first: true, predicate: ["commentEditor"], descendants: true, read: AXTextEditorComponent, isSignal: true }], ngImport: i0, template: "<div class=\"axm-comment\">\n  <ax-comment-container #commentContainer>\n    <!-- ----- Loading skeleton while comments are fetched ----- -->\n    @if (isLoading()) {\n      <div class=\"axm-comment__list axm-comment__list--loading\">\n        @for (skeleton of [0, 1, 2]; track skeleton) {\n          <div class=\"axm-comment__skeleton\" [class.axm-comment__skeleton--compact]=\"skeleton > 0\">\n            <ax-skeleton class=\"size-9 shrink-0 rounded-full\"></ax-skeleton>\n            <div class=\"axm-comment__skeleton-body\">\n              <ax-skeleton class=\"h-3.5 w-28 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              <!--------------------------------------------------------------->\n              <!-- ----- Extra skeleton line on first row ----- -->\n              @if (skeleton === 0) {\n                <ax-skeleton class=\"h-3 w-2/3 rounded-full\"></ax-skeleton>\n              }\n            </div>\n          </div>\n        }\n      </div>\n    }\n    <!-- ----- Empty state when the thread has no comments ----- -->\n    @else if (comments().length === 0) {\n      <div class=\"axm-comment__empty\">\n        <axp-state-message\n          icon=\"fa-light fa-comments\"\n          [title]=\"'@conversation:comments.components.comment.empty-states.no-comments.title'\"\n          [description]=\"'@conversation:comments.components.comment.empty-states.no-comments.description'\"\n        ></axp-state-message>\n      </div>\n    }\n    <!-- ----- Comment thread from the mapped datasource ----- -->\n    @else {\n      <div class=\"axm-comment__list\">\n        <ax-comment-view #commentsView [datasource]=\"commentItems()\" (onReply)=\"onReply($event)\" (onLikeChange)=\"onLikeChange($event)\" (onRepliesToggle)=\"onRepliesToggle($event)\" (onAction)=\"onAction($event)\">\n          <ng-template axCommentItem let-item>\n            <div class=\"flex min-w-0 items-start gap-2\">\n              <axp-user-avatar class=\"shrink-0\" [size]=\"42\" [userId]=\"commentSenderId(item)\" [axpUserCard]=\"commentSenderId(item)\"></axp-user-avatar>\n              <div class=\"min-w-0 flex-1\">\n                <div class=\"flex min-w-0 items-center justify-between gap-2\">\n                  <div class=\"flex min-w-0 flex-wrap items-center\">\n                    <ax-title [axpUserCard]=\"commentSenderId(item)\">{{ item.author }}</ax-title>\n                    <!--------------------------------------------------------------->\n                    <!-- ----- You badge for the current user's comment ----- -->\n                    @if (item.isYou) {\n                      <ax-badge class=\"ax-sm ax-pill ax-comment-you-badge\" look=\"twotone\" color=\"primary\" [text]=\"('@acorex:comment.you' | translate | async) ?? 'You'\"></ax-badge>\n                    }\n                    <!--------------------------------------------------------------->\n                    <!-- ----- Edited label (before timestamp) ----- -->\n                    @if (item.edited) {\n                      <ax-comment-edited [editedAt]=\"item.editedAt\" />\n                    }\n                    <!--------------------------------------------------------------->\n                    <!-- ----- Relative timestamp for this comment ----- -->\n                    @if (item.date) {\n                      <ax-comment-date>{{ item.date }}</ax-comment-date>\n                    }\n                  </div>\n                  <!--------------------------------------------------------------->\n                  <!-- ----- Overflow menu from item actions ----- -->\n                  @if (item.actions?.length) {\n                    <ax-dropdown-button class=\"ax-sm\" mode=\"dropdown\" look=\"blank\" [iconOnly]=\"true\" [text]=\"('@conversation:comments.actions.more' | translate | async) ?? ''\">\n                      <ax-prefix>\n                        <ax-icon icon=\"ax-icon ax-icon-more-horizontal\"></ax-icon>\n                      </ax-prefix>\n                      <ax-button-item-list>\n                        @for (action of item.actions; track action.name ?? action.text) {\n                          <ax-button-item [text]=\"action.text\" [color]=\"action.color\" (onClick)=\"onOverflowAction(item, action.name ?? action.text)\">\n                            <!--------------------------------------------------------------->\n                            <!-- ----- Action icon when the menu item has one ----- -->\n                            @if (action.icon) {\n                              <ax-prefix>\n                                <ax-icon [icon]=\"action.icon\"></ax-icon>\n                              </ax-prefix>\n                            }\n                          </ax-button-item>\n                        }\n                      </ax-button-item-list>\n                    </ax-dropdown-button>\n                  }\n                </div>\n                <ax-content>\n                  <div [innerHTML]=\"item.content\"></div>\n                </ax-content>\n              </div>\n            </div>\n          </ng-template>\n        </ax-comment-view>\n      </div>\n    }\n\n    <ax-footer style=\"padding: 0.1rem\">\n      <!-- ----- Edit context above the composer ----- -->\n      @if (editing(); as editItem) {\n        <div class=\"axm-comment__context-bar\" tabindex=\"0\" (click)=\"scrollToCommentContext(editItem)\" (keydown.enter)=\"scrollToCommentContext(editItem)\" (keydown.space)=\"$event.preventDefault(); scrollToCommentContext(editItem)\">\n          <div class=\"axm-comment__context-bar-body\">\n            <i class=\"fa-light fa-pen axm-comment__context-bar-icon\" aria-hidden=\"true\"></i>\n            <span class=\"axm-comment__context-bar-copy\">\n              <span class=\"axm-comment__context-bar-label\">{{ '@conversation:comments.actions.edit-message' | translate | async }}</span>\n              @if (commentContextPreview(editItem.content); as preview) {\n                <span class=\"axm-comment__context-bar-preview\" [title]=\"preview\">{{ preview }}</span>\n              }\n            </span>\n          </div>\n          <button type=\"button\" class=\"axm-comment__context-bar-close\" (click)=\"$event.stopPropagation(); cancelEdit()\" [attr.aria-label]=\"('@conversation:comments.actions.cancel.title' | translate | async) ?? 'Cancel'\">\n            <i class=\"fa-light fa-xmark\" aria-hidden=\"true\"></i>\n          </button>\n        </div>\n      }\n      <!-- ----- Reply context above the composer ----- -->\n      @else if (replyingTo(); as replyItem) {\n        <div class=\"axm-comment__context-bar\" tabindex=\"0\" (click)=\"scrollToCommentContext(replyItem)\" (keydown.enter)=\"scrollToCommentContext(replyItem)\" (keydown.space)=\"$event.preventDefault(); scrollToCommentContext(replyItem)\">\n          <div class=\"axm-comment__context-bar-body\">\n            <i class=\"fa-light fa-reply axm-comment__context-bar-icon\" aria-hidden=\"true\"></i>\n            <span class=\"axm-comment__context-bar-copy\">\n              <span class=\"axm-comment__context-bar-label\">\n                {{ '@conversation:comments.actions.reply-to' | translate | async }}\n                <span class=\"axm-comment__context-bar-name\">\n                  @if (replyItem.isYou) {\n                    {{ '@acorex:comment.you' | translate | async }}\n                  } @else {\n                    {{ replyItem.author }}\n                  }\n                </span>\n              </span>\n              @if (commentContextPreview(replyItem.content); as preview) {\n                <span class=\"axm-comment__context-bar-preview\" [title]=\"preview\">{{ preview }}</span>\n              }\n            </span>\n          </div>\n          <button type=\"button\" class=\"axm-comment__context-bar-close\" (click)=\"$event.stopPropagation(); cancelReply()\" [attr.aria-label]=\"('@conversation:comments.actions.cancel.title' | translate | async) ?? 'Cancel'\">\n            <i class=\"fa-light fa-xmark\" aria-hidden=\"true\"></i>\n          </button>\n        </div>\n      }\n\n      <ax-comment-reply>\n        <ax-text-editor\n          #commentEditor\n          look=\"solid\"\n          outputFormat=\"html\"\n          [initialLine]=\"3\"\n          [ngModel]=\"draft()\"\n          (ngModelChange)=\"draft.set($event)\"\n          [placeHolder]=\"((editing() ? '@conversation:comments.actions.edit-message' : replyingTo() ? '@conversation:comments.composer.reply-placeholder' : '@conversation:comments.composer.placeholder') | translate | async) ?? ''\"\n        >\n          <ax-footer>\n            <div class=\"axm-comment__editor-actions\">\n              <ax-button\n                class=\"axm-comment__send ax-sm\"\n                look=\"solid\"\n                color=\"primary\"\n                [disabled]=\"hasCooldown() || isCommentDraftEmpty() || isSubmitting()\"\n                [text]=\"(editing() ? '@conversation:comments.actions.edit.title' : '@conversation:comments.actions.send.title') | translate | async\"\n                (onClick)=\"submitComment()\"\n              >\n                @if (isSubmitting()) {\n                  <ax-loading></ax-loading>\n                } @else {\n                  <!-- ----- Send icon when not submitting ----- -->\n                  <ax-prefix>\n                    <ax-icon icon=\"fa-light fa-paper-plane-top\"></ax-icon>\n                  </ax-prefix>\n                }\n              </ax-button>\n            </div>\n          </ax-footer>\n          <ax-text-editor-toolbar class=\"border-b\">\n            <ax-text-editor-history></ax-text-editor-history>\n            <ax-divider></ax-divider>\n            <ax-text-editor-font-style></ax-text-editor-font-style>\n            <ax-divider></ax-divider>\n            <ax-text-editor-colors></ax-text-editor-colors>\n            <ax-divider></ax-divider>\n            <ax-text-editor-list></ax-text-editor-list>\n            <ax-divider></ax-divider>\n            <ax-text-editor-alignment></ax-text-editor-alignment>\n          </ax-text-editor-toolbar>\n        </ax-text-editor>\n      </ax-comment-reply>\n    </ax-footer>\n  </ax-comment-container>\n</div>\n", styles: ["@layer properties;:host{display:block;height:100%;min-height:0px;width:100%}ax-comment-container{display:flex;flex-direction:column;justify-content:space-between;height:100%}.ax-comment-replies{padding-inline-start:1.75rem!important}.axm-comment{display:flex;width:100%;height:100%;min-height:0px;flex-direction:column;overflow:hidden;background-color:rgb(var(--ax-sys-color-lightest-surface))}.axm-comment .axm-comment__list{min-height:0px;flex:1;overflow-y:auto;padding:1rem 1rem 1.25rem;scroll-behavior:smooth}.axm-comment .axm-comment__list.axm-comment__list--loading{display:flex;flex-direction:column;gap:1.25rem}.axm-comment .axm-comment__empty{display:flex;min-height:min(16rem,40vh);flex:1;flex-direction:column;align-items:center;justify-content:center;padding:2rem 1.25rem}.axm-comment .axm-comment__skeleton{display:flex;align-items:flex-start;gap:.75rem}.axm-comment .axm-comment__skeleton.axm-comment__skeleton--compact .axm-comment__skeleton-body{gap:.375rem}.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__context-bar{display:flex;min-width:0px;cursor:pointer;align-items:flex-start;gap:calc(var(--spacing, .25rem) * 2);margin-block-end:8px;padding:.5rem .75rem;border:1px solid rgb(var(--ax-sys-color-border-light-surface));border-radius:6px;border-inline-start:3px solid rgb(var(--ax-sys-color-primary-surface));background-color:rgba(var(--ax-sys-color-primary-lightest-surface),.4);font-size:.8125rem;line-height:1.45}.axm-comment .axm-comment__context-bar:hover{background-color:rgba(var(--ax-sys-color-primary-lightest-surface),.55)}.axm-comment .axm-comment__context-bar:focus-visible{outline:2px solid rgb(var(--ax-sys-color-primary-surface));outline-offset:2px}.axm-comment .axm-comment__context-bar-body{display:flex;min-width:0px;flex:1;align-items:flex-start;text-align:start;gap:.625rem;overflow:hidden;pointer-events:none}.axm-comment .axm-comment__context-bar-icon{flex-shrink:0;font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));--tw-leading: 1;line-height:1;margin-top:.125rem;color:rgb(var(--ax-sys-color-primary-surface))}.axm-comment .axm-comment__context-bar-copy{display:flex;min-width:0px;flex:1;flex-direction:column;gap:.125rem;overflow:hidden}.axm-comment .axm-comment__context-bar-label{flex-shrink:0;font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));--tw-leading: calc(var(--spacing, .25rem) * 4);line-height:calc(var(--spacing, .25rem) * 4);color:rgb(var(--ax-sys-color-neutral-700-surface, 55 65 81))}.axm-comment .axm-comment__context-bar-name{--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);color:rgb(var(--ax-sys-color-neutral-900-surface, 17 24 39))}.axm-comment .axm-comment__context-bar-preview{min-width:0px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:start;font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));--tw-leading: calc(var(--spacing, .25rem) * 4);line-height:calc(var(--spacing, .25rem) * 4);color:rgb(var(--ax-sys-color-neutral-600-surface, 107 114 128))}.axm-comment .axm-comment__context-bar-close{position:relative;z-index:1;display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;align-self:flex-start;border-radius:var(--radius-sm, .25rem);width:1.75rem;height:1.75rem;margin-inline-start:-.25rem;padding:0;border:none;background:transparent;color:rgb(var(--ax-sys-color-neutral-500-surface, 107 114 128));font-size:1rem;line-height:1;cursor:pointer}.axm-comment .axm-comment__context-bar-close:hover{background-color:rgba(var(--ax-sys-color-neutral-100-surface, 243 244 246),.9);color:rgb(var(--ax-sys-color-neutral-700-surface, 55 65 81))}.axm-comment .axm-comment__context-bar-close:focus-visible{outline:2px solid rgb(var(--ax-sys-color-primary-surface));outline-offset:2px}.axm-comment .axm-comment__editor-actions{display:flex;align-items:center;justify-content:flex-end;gap:calc(var(--spacing, .25rem) * 2);padding:var(--spacing, .25rem)}.axm-comment .axm-comment__send{min-width:5.5rem}@property --tw-leading{syntax: \"*\"; inherits: false;}@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-leading: initial;--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", "line", "initialLine", "maxLine"], 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.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", inputs: ["datasource", "itemTemplate"], outputs: ["datasourceChange", "onReply", "onLikeChange", "onRepliesToggle", "onAction"] }, { kind: "component", type: i4.AXCommentContainerComponent, selector: "ax-comment-container" }, { kind: "component", type: i4.AXCommentReplyComponent, selector: "ax-comment-reply", inputs: ["item"], outputs: ["onClose", "onTargetClick"] }, { kind: "component", type: i4.AXCommentDateComponent, selector: "ax-comment-date" }, { kind: "component", type: i4.AXCommentEditedComponent, selector: "ax-comment-edited", inputs: ["editedAt"] }, { kind: "directive", type: i4.AXCommentItemTemplateDirective, selector: "ng-template[axCommentItem]" }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: i1.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }, { 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: AXDropdownButtonModule }, { kind: "component", type: i7.AXDropdownButtonComponent, selector: "ax-dropdown-button", inputs: ["disabled", "size", "text", "selected", "color", "look", "type", "mode", "iconOnly"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "lookChange", "colorChange", "disabledChange"] }, { kind: "ngmodule", type: AXLoadingModule }, { kind: "component", type: i8.AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "context"], outputs: ["visibleChange"] }, { kind: "ngmodule", type: AXTranslationModule }, { 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: "component", type: AXPStateMessageComponent, selector: "axp-state-message", inputs: ["mode", "icon", "title", "description", "titleParams", "descriptionParams", "look"] }, { 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: "pipe", type: i1$2.AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXMCommentComponent, decorators: [{
             type: Component,
@@ -12936,7 +13117,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                         AXPStateMessageComponent,
                         AXPUserAvatarComponent,
                         AXPUserCardDirective,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"axm-comment\">\n  <ax-comment-container #commentContainer>\n    <!-- ----- Loading skeleton while comments are fetched ----- -->\n    @if (isLoading()) {\n      <div class=\"axm-comment__list axm-comment__list--loading\">\n        @for (skeleton of [0, 1, 2]; track skeleton) {\n          <div class=\"axm-comment__skeleton\" [class.axm-comment__skeleton--compact]=\"skeleton > 0\">\n            <ax-skeleton class=\"size-9 shrink-0 rounded-full\"></ax-skeleton>\n            <div class=\"axm-comment__skeleton-body\">\n              <ax-skeleton class=\"h-3.5 w-28 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              <!--------------------------------------------------------------->\n              <!-- ----- Extra skeleton line on first row ----- -->\n              @if (skeleton === 0) {\n                <ax-skeleton class=\"h-3 w-2/3 rounded-full\"></ax-skeleton>\n              }\n            </div>\n          </div>\n        }\n      </div>\n    }\n    <!-- ----- Empty state when the thread has no comments ----- -->\n    @else if (comments().length === 0) {\n      <div class=\"axm-comment__empty\">\n        <axp-state-message\n          icon=\"fa-light fa-comments\"\n          [title]=\"'@conversation:comments.components.comment.empty-states.no-comments.title'\"\n          [description]=\"'@conversation:comments.components.comment.empty-states.no-comments.description'\"\n        ></axp-state-message>\n      </div>\n    }\n    <!-- ----- Comment thread from the mapped datasource ----- -->\n    @else {\n      <div class=\"axm-comment__list\">\n        <ax-comment-view #commentsView [datasource]=\"commentItems()\" (onReply)=\"onReply($event)\" (onLikeChange)=\"onLikeChange($event)\" (onRepliesToggle)=\"onRepliesToggle($event)\" (onAction)=\"onAction($event)\">\n          <ng-template axCommentItem let-item>\n            <div class=\"flex min-w-0 items-start gap-2\">\n              <axp-user-avatar class=\"shrink-0\" [size]=\"42\" [userId]=\"commentSenderId(item)\" [axpUserCard]=\"commentSenderId(item)\"></axp-user-avatar>\n              <div class=\"min-w-0 flex-1\">\n                <div class=\"flex min-w-0 items-center justify-between gap-2\">\n                  <div class=\"flex min-w-0 flex-wrap items-center\">\n                    <ax-title [axpUserCard]=\"commentSenderId(item)\">{{ item.author }}</ax-title>\n                    <!--------------------------------------------------------------->\n                    <!-- ----- You badge for the current user's comment ----- -->\n                    @if (item.isYou) {\n                      <ax-badge class=\"ax-sm ax-pill ax-comment-you-badge\" look=\"twotone\" color=\"primary\" [text]=\"('@acorex:comment.you' | translate | async) ?? 'You'\"></ax-badge>\n                    }\n                    <!--------------------------------------------------------------->\n                    <!-- ----- Edited label (before timestamp) ----- -->\n                    @if (item.edited) {\n                      <ax-comment-edited [editedAt]=\"item.editedAt\" />\n                    }\n                    <!--------------------------------------------------------------->\n                    <!-- ----- Relative timestamp for this comment ----- -->\n                    @if (item.date) {\n                      <ax-comment-date>{{ item.date }}</ax-comment-date>\n                    }\n                  </div>\n                  <!--------------------------------------------------------------->\n                  <!-- ----- Overflow menu from item actions ----- -->\n                  @if (item.actions?.length) {\n                    <ax-dropdown-button class=\"ax-sm\" mode=\"dropdown\" look=\"blank\" [iconOnly]=\"true\" [text]=\"('@conversation:comments.actions.more' | translate | async) ?? ''\">\n                      <ax-prefix>\n                        <ax-icon icon=\"ax-icon ax-icon-more-horizontal\"></ax-icon>\n                      </ax-prefix>\n                      <ax-button-item-list>\n                        @for (action of item.actions; track action.name ?? action.text) {\n                          <ax-button-item [text]=\"action.text\" [color]=\"action.color\" (onClick)=\"onOverflowAction(item, action.name ?? action.text)\">\n                            <!--------------------------------------------------------------->\n                            <!-- ----- Action icon when the menu item has one ----- -->\n                            @if (action.icon) {\n                              <ax-prefix>\n                                <ax-icon [icon]=\"action.icon\"></ax-icon>\n                              </ax-prefix>\n                            }\n                          </ax-button-item>\n                        }\n                      </ax-button-item-list>\n                    </ax-dropdown-button>\n                  }\n                </div>\n                <ax-content>\n                  <div [innerHTML]=\"item.content\"></div>\n                </ax-content>\n              </div>\n            </div>\n          </ng-template>\n        </ax-comment-view>\n      </div>\n    }\n\n    <ax-footer style=\"padding: 0.1rem\">\n      <!-- ----- Edit context above the composer ----- -->\n      @if (editing(); as editItem) {\n        <div class=\"axm-comment__context-bar\" tabindex=\"0\" (click)=\"scrollToCommentContext(editItem)\" (keydown.enter)=\"scrollToCommentContext(editItem)\" (keydown.space)=\"$event.preventDefault(); scrollToCommentContext(editItem)\">\n          <div class=\"axm-comment__context-bar-body\">\n            <i class=\"fa-light fa-pen axm-comment__context-bar-icon\" aria-hidden=\"true\"></i>\n            <span class=\"axm-comment__context-bar-copy\">\n              <span class=\"axm-comment__context-bar-label\">{{ '@conversation:comments.actions.edit-message' | translate | async }}</span>\n              @if (commentContextPreview(editItem.content); as preview) {\n                <span class=\"axm-comment__context-bar-preview\" [title]=\"preview\">{{ preview }}</span>\n              }\n            </span>\n          </div>\n          <button type=\"button\" class=\"axm-comment__context-bar-close\" (click)=\"$event.stopPropagation(); cancelEdit()\" [attr.aria-label]=\"('@conversation:comments.actions.cancel.title' | translate | async) ?? 'Cancel'\">\n            <i class=\"fa-light fa-xmark\" aria-hidden=\"true\"></i>\n          </button>\n        </div>\n      }\n      <!-- ----- Reply context above the composer ----- -->\n      @else if (replyingTo(); as replyItem) {\n        <div class=\"axm-comment__context-bar\" tabindex=\"0\" (click)=\"scrollToCommentContext(replyItem)\" (keydown.enter)=\"scrollToCommentContext(replyItem)\" (keydown.space)=\"$event.preventDefault(); scrollToCommentContext(replyItem)\">\n          <div class=\"axm-comment__context-bar-body\">\n            <i class=\"fa-light fa-reply axm-comment__context-bar-icon\" aria-hidden=\"true\"></i>\n            <span class=\"axm-comment__context-bar-copy\">\n              <span class=\"axm-comment__context-bar-label\">\n                {{ '@conversation:comments.actions.reply-to' | translate | async }}\n                <span class=\"axm-comment__context-bar-name\">\n                  @if (replyItem.isYou) {\n                    {{ '@acorex:comment.you' | translate | async }}\n                  } @else {\n                    {{ replyItem.author }}\n                  }\n                </span>\n              </span>\n              @if (commentContextPreview(replyItem.content); as preview) {\n                <span class=\"axm-comment__context-bar-preview\" [title]=\"preview\">{{ preview }}</span>\n              }\n            </span>\n          </div>\n          <button type=\"button\" class=\"axm-comment__context-bar-close\" (click)=\"$event.stopPropagation(); cancelReply()\" [attr.aria-label]=\"('@conversation:comments.actions.cancel.title' | translate | async) ?? 'Cancel'\">\n            <i class=\"fa-light fa-xmark\" aria-hidden=\"true\"></i>\n          </button>\n        </div>\n      }\n\n      <ax-comment-reply>\n        <ax-text-editor\n          #commentEditor\n          look=\"solid\"\n          outputFormat=\"html\"\n          [initialLine]=\"3\"\n          [ngModel]=\"draft()\"\n          (ngModelChange)=\"draft.set($event)\"\n          [placeHolder]=\"((editing() ? '@conversation:comments.actions.edit-message' : replyingTo() ? '@conversation:comments.composer.reply-placeholder' : '@conversation:comments.composer.placeholder') | translate | async) ?? ''\"\n        >\n          <ax-footer>\n            <div class=\"axm-comment__editor-actions\">\n              <ax-button\n                class=\"axm-comment__send ax-sm\"\n                look=\"solid\"\n                color=\"primary\"\n                [disabled]=\"hasCooldown() || isCommentDraftEmpty() || isSubmitting()\"\n                [text]=\"(editing() ? '@conversation:comments.actions.edit.title' : '@conversation:comments.actions.send.title') | translate | async\"\n                (onClick)=\"submitComment()\"\n              >\n                @if (isSubmitting()) {\n                  <ax-loading></ax-loading>\n                } @else {\n                  <!-- ----- Send icon when not submitting ----- -->\n                  <ax-prefix>\n                    <ax-icon icon=\"fa-light fa-paper-plane-top\"></ax-icon>\n                  </ax-prefix>\n                }\n              </ax-button>\n            </div>\n          </ax-footer>\n          <ax-text-editor-toolbar class=\"border-b\">\n            <ax-text-editor-history></ax-text-editor-history>\n            <ax-divider></ax-divider>\n            <ax-text-editor-font-style></ax-text-editor-font-style>\n            <ax-divider></ax-divider>\n            <ax-text-editor-colors></ax-text-editor-colors>\n            <ax-divider></ax-divider>\n            <ax-text-editor-list></ax-text-editor-list>\n            <ax-divider></ax-divider>\n            <ax-text-editor-alignment></ax-text-editor-alignment>\n          </ax-text-editor-toolbar>\n        </ax-text-editor>\n      </ax-comment-reply>\n    </ax-footer>\n  </ax-comment-container>\n</div>\n", styles: ["@layer properties;:host{display:block;height:100%;min-height:0px;width:100%}ax-comment-container{display:flex;flex-direction:column;justify-content:space-between;height:100%}.axm-comment{display:flex;width:100%;height:100%;min-height:0px;flex-direction:column;overflow:hidden;background-color:rgb(var(--ax-sys-color-lightest-surface))}.axm-comment .axm-comment__list{min-height:0px;flex:1;overflow-y:auto;padding:1rem 1rem 1.25rem;scroll-behavior:smooth}.axm-comment .axm-comment__list.axm-comment__list--loading{display:flex;flex-direction:column;gap:1.25rem}.axm-comment .axm-comment__empty{display:flex;min-height:min(16rem,40vh);flex:1;flex-direction:column;align-items:center;justify-content:center;padding:2rem 1.25rem}.axm-comment .axm-comment__skeleton{display:flex;align-items:flex-start;gap:.75rem}.axm-comment .axm-comment__skeleton.axm-comment__skeleton--compact .axm-comment__skeleton-body{gap:.375rem}.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__context-bar{display:flex;min-width:0px;cursor:pointer;align-items:flex-start;gap:calc(var(--spacing, .25rem) * 2);margin-block-end:8px;padding:.5rem .75rem;border:1px solid rgb(var(--ax-sys-color-border-light-surface));border-radius:6px;border-inline-start:3px solid rgb(var(--ax-sys-color-primary-surface));background-color:rgba(var(--ax-sys-color-primary-lightest-surface),.4);font-size:.8125rem;line-height:1.45}.axm-comment .axm-comment__context-bar:hover{background-color:rgba(var(--ax-sys-color-primary-lightest-surface),.55)}.axm-comment .axm-comment__context-bar:focus-visible{outline:2px solid rgb(var(--ax-sys-color-primary-surface));outline-offset:2px}.axm-comment .axm-comment__context-bar-body{display:flex;min-width:0px;flex:1;align-items:flex-start;text-align:start;gap:.625rem;overflow:hidden;pointer-events:none}.axm-comment .axm-comment__context-bar-icon{flex-shrink:0;font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));--tw-leading: 1;line-height:1;margin-top:.125rem;color:rgb(var(--ax-sys-color-primary-surface))}.axm-comment .axm-comment__context-bar-copy{display:flex;min-width:0px;flex:1;flex-direction:column;gap:.125rem;overflow:hidden}.axm-comment .axm-comment__context-bar-label{flex-shrink:0;font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));--tw-leading: calc(var(--spacing, .25rem) * 4);line-height:calc(var(--spacing, .25rem) * 4);color:rgb(var(--ax-sys-color-neutral-700-surface, 55 65 81))}.axm-comment .axm-comment__context-bar-name{--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);color:rgb(var(--ax-sys-color-neutral-900-surface, 17 24 39))}.axm-comment .axm-comment__context-bar-preview{min-width:0px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:start;font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));--tw-leading: calc(var(--spacing, .25rem) * 4);line-height:calc(var(--spacing, .25rem) * 4);color:rgb(var(--ax-sys-color-neutral-600-surface, 107 114 128))}.axm-comment .axm-comment__context-bar-close{position:relative;z-index:1;display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;align-self:flex-start;border-radius:var(--radius-sm, .25rem);width:1.75rem;height:1.75rem;margin-inline-start:-.25rem;padding:0;border:none;background:transparent;color:rgb(var(--ax-sys-color-neutral-500-surface, 107 114 128));font-size:1rem;line-height:1;cursor:pointer}.axm-comment .axm-comment__context-bar-close:hover{background-color:rgba(var(--ax-sys-color-neutral-100-surface, 243 244 246),.9);color:rgb(var(--ax-sys-color-neutral-700-surface, 55 65 81))}.axm-comment .axm-comment__context-bar-close:focus-visible{outline:2px solid rgb(var(--ax-sys-color-primary-surface));outline-offset:2px}.axm-comment .axm-comment__editor-actions{display:flex;align-items:center;justify-content:flex-end;gap:calc(var(--spacing, .25rem) * 2);padding:var(--spacing, .25rem)}.axm-comment .axm-comment__send{min-width:5.5rem}@property --tw-leading{syntax: \"*\"; inherits: false;}@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-leading: initial;--tw-font-weight: initial}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"axm-comment\">\n  <ax-comment-container #commentContainer>\n    <!-- ----- Loading skeleton while comments are fetched ----- -->\n    @if (isLoading()) {\n      <div class=\"axm-comment__list axm-comment__list--loading\">\n        @for (skeleton of [0, 1, 2]; track skeleton) {\n          <div class=\"axm-comment__skeleton\" [class.axm-comment__skeleton--compact]=\"skeleton > 0\">\n            <ax-skeleton class=\"size-9 shrink-0 rounded-full\"></ax-skeleton>\n            <div class=\"axm-comment__skeleton-body\">\n              <ax-skeleton class=\"h-3.5 w-28 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              <!--------------------------------------------------------------->\n              <!-- ----- Extra skeleton line on first row ----- -->\n              @if (skeleton === 0) {\n                <ax-skeleton class=\"h-3 w-2/3 rounded-full\"></ax-skeleton>\n              }\n            </div>\n          </div>\n        }\n      </div>\n    }\n    <!-- ----- Empty state when the thread has no comments ----- -->\n    @else if (comments().length === 0) {\n      <div class=\"axm-comment__empty\">\n        <axp-state-message\n          icon=\"fa-light fa-comments\"\n          [title]=\"'@conversation:comments.components.comment.empty-states.no-comments.title'\"\n          [description]=\"'@conversation:comments.components.comment.empty-states.no-comments.description'\"\n        ></axp-state-message>\n      </div>\n    }\n    <!-- ----- Comment thread from the mapped datasource ----- -->\n    @else {\n      <div class=\"axm-comment__list\">\n        <ax-comment-view #commentsView [datasource]=\"commentItems()\" (onReply)=\"onReply($event)\" (onLikeChange)=\"onLikeChange($event)\" (onRepliesToggle)=\"onRepliesToggle($event)\" (onAction)=\"onAction($event)\">\n          <ng-template axCommentItem let-item>\n            <div class=\"flex min-w-0 items-start gap-2\">\n              <axp-user-avatar class=\"shrink-0\" [size]=\"42\" [userId]=\"commentSenderId(item)\" [axpUserCard]=\"commentSenderId(item)\"></axp-user-avatar>\n              <div class=\"min-w-0 flex-1\">\n                <div class=\"flex min-w-0 items-center justify-between gap-2\">\n                  <div class=\"flex min-w-0 flex-wrap items-center\">\n                    <ax-title [axpUserCard]=\"commentSenderId(item)\">{{ item.author }}</ax-title>\n                    <!--------------------------------------------------------------->\n                    <!-- ----- You badge for the current user's comment ----- -->\n                    @if (item.isYou) {\n                      <ax-badge class=\"ax-sm ax-pill ax-comment-you-badge\" look=\"twotone\" color=\"primary\" [text]=\"('@acorex:comment.you' | translate | async) ?? 'You'\"></ax-badge>\n                    }\n                    <!--------------------------------------------------------------->\n                    <!-- ----- Edited label (before timestamp) ----- -->\n                    @if (item.edited) {\n                      <ax-comment-edited [editedAt]=\"item.editedAt\" />\n                    }\n                    <!--------------------------------------------------------------->\n                    <!-- ----- Relative timestamp for this comment ----- -->\n                    @if (item.date) {\n                      <ax-comment-date>{{ item.date }}</ax-comment-date>\n                    }\n                  </div>\n                  <!--------------------------------------------------------------->\n                  <!-- ----- Overflow menu from item actions ----- -->\n                  @if (item.actions?.length) {\n                    <ax-dropdown-button class=\"ax-sm\" mode=\"dropdown\" look=\"blank\" [iconOnly]=\"true\" [text]=\"('@conversation:comments.actions.more' | translate | async) ?? ''\">\n                      <ax-prefix>\n                        <ax-icon icon=\"ax-icon ax-icon-more-horizontal\"></ax-icon>\n                      </ax-prefix>\n                      <ax-button-item-list>\n                        @for (action of item.actions; track action.name ?? action.text) {\n                          <ax-button-item [text]=\"action.text\" [color]=\"action.color\" (onClick)=\"onOverflowAction(item, action.name ?? action.text)\">\n                            <!--------------------------------------------------------------->\n                            <!-- ----- Action icon when the menu item has one ----- -->\n                            @if (action.icon) {\n                              <ax-prefix>\n                                <ax-icon [icon]=\"action.icon\"></ax-icon>\n                              </ax-prefix>\n                            }\n                          </ax-button-item>\n                        }\n                      </ax-button-item-list>\n                    </ax-dropdown-button>\n                  }\n                </div>\n                <ax-content>\n                  <div [innerHTML]=\"item.content\"></div>\n                </ax-content>\n              </div>\n            </div>\n          </ng-template>\n        </ax-comment-view>\n      </div>\n    }\n\n    <ax-footer style=\"padding: 0.1rem\">\n      <!-- ----- Edit context above the composer ----- -->\n      @if (editing(); as editItem) {\n        <div class=\"axm-comment__context-bar\" tabindex=\"0\" (click)=\"scrollToCommentContext(editItem)\" (keydown.enter)=\"scrollToCommentContext(editItem)\" (keydown.space)=\"$event.preventDefault(); scrollToCommentContext(editItem)\">\n          <div class=\"axm-comment__context-bar-body\">\n            <i class=\"fa-light fa-pen axm-comment__context-bar-icon\" aria-hidden=\"true\"></i>\n            <span class=\"axm-comment__context-bar-copy\">\n              <span class=\"axm-comment__context-bar-label\">{{ '@conversation:comments.actions.edit-message' | translate | async }}</span>\n              @if (commentContextPreview(editItem.content); as preview) {\n                <span class=\"axm-comment__context-bar-preview\" [title]=\"preview\">{{ preview }}</span>\n              }\n            </span>\n          </div>\n          <button type=\"button\" class=\"axm-comment__context-bar-close\" (click)=\"$event.stopPropagation(); cancelEdit()\" [attr.aria-label]=\"('@conversation:comments.actions.cancel.title' | translate | async) ?? 'Cancel'\">\n            <i class=\"fa-light fa-xmark\" aria-hidden=\"true\"></i>\n          </button>\n        </div>\n      }\n      <!-- ----- Reply context above the composer ----- -->\n      @else if (replyingTo(); as replyItem) {\n        <div class=\"axm-comment__context-bar\" tabindex=\"0\" (click)=\"scrollToCommentContext(replyItem)\" (keydown.enter)=\"scrollToCommentContext(replyItem)\" (keydown.space)=\"$event.preventDefault(); scrollToCommentContext(replyItem)\">\n          <div class=\"axm-comment__context-bar-body\">\n            <i class=\"fa-light fa-reply axm-comment__context-bar-icon\" aria-hidden=\"true\"></i>\n            <span class=\"axm-comment__context-bar-copy\">\n              <span class=\"axm-comment__context-bar-label\">\n                {{ '@conversation:comments.actions.reply-to' | translate | async }}\n                <span class=\"axm-comment__context-bar-name\">\n                  @if (replyItem.isYou) {\n                    {{ '@acorex:comment.you' | translate | async }}\n                  } @else {\n                    {{ replyItem.author }}\n                  }\n                </span>\n              </span>\n              @if (commentContextPreview(replyItem.content); as preview) {\n                <span class=\"axm-comment__context-bar-preview\" [title]=\"preview\">{{ preview }}</span>\n              }\n            </span>\n          </div>\n          <button type=\"button\" class=\"axm-comment__context-bar-close\" (click)=\"$event.stopPropagation(); cancelReply()\" [attr.aria-label]=\"('@conversation:comments.actions.cancel.title' | translate | async) ?? 'Cancel'\">\n            <i class=\"fa-light fa-xmark\" aria-hidden=\"true\"></i>\n          </button>\n        </div>\n      }\n\n      <ax-comment-reply>\n        <ax-text-editor\n          #commentEditor\n          look=\"solid\"\n          outputFormat=\"html\"\n          [initialLine]=\"3\"\n          [ngModel]=\"draft()\"\n          (ngModelChange)=\"draft.set($event)\"\n          [placeHolder]=\"((editing() ? '@conversation:comments.actions.edit-message' : replyingTo() ? '@conversation:comments.composer.reply-placeholder' : '@conversation:comments.composer.placeholder') | translate | async) ?? ''\"\n        >\n          <ax-footer>\n            <div class=\"axm-comment__editor-actions\">\n              <ax-button\n                class=\"axm-comment__send ax-sm\"\n                look=\"solid\"\n                color=\"primary\"\n                [disabled]=\"hasCooldown() || isCommentDraftEmpty() || isSubmitting()\"\n                [text]=\"(editing() ? '@conversation:comments.actions.edit.title' : '@conversation:comments.actions.send.title') | translate | async\"\n                (onClick)=\"submitComment()\"\n              >\n                @if (isSubmitting()) {\n                  <ax-loading></ax-loading>\n                } @else {\n                  <!-- ----- Send icon when not submitting ----- -->\n                  <ax-prefix>\n                    <ax-icon icon=\"fa-light fa-paper-plane-top\"></ax-icon>\n                  </ax-prefix>\n                }\n              </ax-button>\n            </div>\n          </ax-footer>\n          <ax-text-editor-toolbar class=\"border-b\">\n            <ax-text-editor-history></ax-text-editor-history>\n            <ax-divider></ax-divider>\n            <ax-text-editor-font-style></ax-text-editor-font-style>\n            <ax-divider></ax-divider>\n            <ax-text-editor-colors></ax-text-editor-colors>\n            <ax-divider></ax-divider>\n            <ax-text-editor-list></ax-text-editor-list>\n            <ax-divider></ax-divider>\n            <ax-text-editor-alignment></ax-text-editor-alignment>\n          </ax-text-editor-toolbar>\n        </ax-text-editor>\n      </ax-comment-reply>\n    </ax-footer>\n  </ax-comment-container>\n</div>\n", styles: ["@layer properties;:host{display:block;height:100%;min-height:0px;width:100%}ax-comment-container{display:flex;flex-direction:column;justify-content:space-between;height:100%}.ax-comment-replies{padding-inline-start:1.75rem!important}.axm-comment{display:flex;width:100%;height:100%;min-height:0px;flex-direction:column;overflow:hidden;background-color:rgb(var(--ax-sys-color-lightest-surface))}.axm-comment .axm-comment__list{min-height:0px;flex:1;overflow-y:auto;padding:1rem 1rem 1.25rem;scroll-behavior:smooth}.axm-comment .axm-comment__list.axm-comment__list--loading{display:flex;flex-direction:column;gap:1.25rem}.axm-comment .axm-comment__empty{display:flex;min-height:min(16rem,40vh);flex:1;flex-direction:column;align-items:center;justify-content:center;padding:2rem 1.25rem}.axm-comment .axm-comment__skeleton{display:flex;align-items:flex-start;gap:.75rem}.axm-comment .axm-comment__skeleton.axm-comment__skeleton--compact .axm-comment__skeleton-body{gap:.375rem}.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__context-bar{display:flex;min-width:0px;cursor:pointer;align-items:flex-start;gap:calc(var(--spacing, .25rem) * 2);margin-block-end:8px;padding:.5rem .75rem;border:1px solid rgb(var(--ax-sys-color-border-light-surface));border-radius:6px;border-inline-start:3px solid rgb(var(--ax-sys-color-primary-surface));background-color:rgba(var(--ax-sys-color-primary-lightest-surface),.4);font-size:.8125rem;line-height:1.45}.axm-comment .axm-comment__context-bar:hover{background-color:rgba(var(--ax-sys-color-primary-lightest-surface),.55)}.axm-comment .axm-comment__context-bar:focus-visible{outline:2px solid rgb(var(--ax-sys-color-primary-surface));outline-offset:2px}.axm-comment .axm-comment__context-bar-body{display:flex;min-width:0px;flex:1;align-items:flex-start;text-align:start;gap:.625rem;overflow:hidden;pointer-events:none}.axm-comment .axm-comment__context-bar-icon{flex-shrink:0;font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));--tw-leading: 1;line-height:1;margin-top:.125rem;color:rgb(var(--ax-sys-color-primary-surface))}.axm-comment .axm-comment__context-bar-copy{display:flex;min-width:0px;flex:1;flex-direction:column;gap:.125rem;overflow:hidden}.axm-comment .axm-comment__context-bar-label{flex-shrink:0;font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));--tw-leading: calc(var(--spacing, .25rem) * 4);line-height:calc(var(--spacing, .25rem) * 4);color:rgb(var(--ax-sys-color-neutral-700-surface, 55 65 81))}.axm-comment .axm-comment__context-bar-name{--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);color:rgb(var(--ax-sys-color-neutral-900-surface, 17 24 39))}.axm-comment .axm-comment__context-bar-preview{min-width:0px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:start;font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));--tw-leading: calc(var(--spacing, .25rem) * 4);line-height:calc(var(--spacing, .25rem) * 4);color:rgb(var(--ax-sys-color-neutral-600-surface, 107 114 128))}.axm-comment .axm-comment__context-bar-close{position:relative;z-index:1;display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;align-self:flex-start;border-radius:var(--radius-sm, .25rem);width:1.75rem;height:1.75rem;margin-inline-start:-.25rem;padding:0;border:none;background:transparent;color:rgb(var(--ax-sys-color-neutral-500-surface, 107 114 128));font-size:1rem;line-height:1;cursor:pointer}.axm-comment .axm-comment__context-bar-close:hover{background-color:rgba(var(--ax-sys-color-neutral-100-surface, 243 244 246),.9);color:rgb(var(--ax-sys-color-neutral-700-surface, 55 65 81))}.axm-comment .axm-comment__context-bar-close:focus-visible{outline:2px solid rgb(var(--ax-sys-color-primary-surface));outline-offset:2px}.axm-comment .axm-comment__editor-actions{display:flex;align-items:center;justify-content:flex-end;gap:calc(var(--spacing, .25rem) * 2);padding:var(--spacing, .25rem)}.axm-comment .axm-comment__send{min-width:5.5rem}@property --tw-leading{syntax: \"*\"; inherits: false;}@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-leading: initial;--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 }] }], commentsView: [{ type: i0.ViewChild, args: ['commentsView', { ...{ read: AXCommentViewComponent }, isSignal: true }] }], commentContainer: [{ type: i0.ViewChild, args: ['commentContainer', { ...{ read: AXCommentContainerComponent }, isSignal: true }] }], editor: [{ type: i0.ViewChild, args: ['commentEditor', { ...{ read: AXTextEditorComponent }, isSignal: true }] }] } });
 //#endregion
 //#region ----- Local helpers -----
@@ -12963,6 +13144,9 @@ function colorForUser(userId) {
     }
     return AVATAR_COLORS[hash];
 }
+function containsComment(list, commentId) {
+    return list.some((comment) => comment.id === commentId || containsComment(comment.replies ?? [], commentId));
+}
 function insertReply(list, parentId, comment) {
     return list.map((c) => {
         if (c.id === parentId) {
@@ -14418,7 +14602,7 @@ async function axmOpenChatCallStartDialog(options) {
     const dialogOpener = options.dialogOpener ?? inject(AXPDialogOpener);
     const data = { conversation };
     await dialogOpener.openPopup({
-        load: () => import('./acorex-platform-module-conversation-client-chat-call-start-popup.component-BEa8wEJt.mjs').then((module) => module.AXMChatCallStartPopupComponent),
+        load: () => import('./acorex-platform-module-conversation-client-chat-call-start-popup.component-C-YXNbrC.mjs').then((module) => module.AXMChatCallStartPopupComponent),
         data: { conversationId: conversation.id },
         show: (component) => popupService.open(component, {
             header: false,
@@ -14700,7 +14884,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-CR4OxDV6.mjs').then(function (n) { return n.b; }).then((m) => m.AXMAssistMessageRendererComponent),
+    componentLoader: () => import('./acorex-platform-module-conversation-client-assist-message-renderer.component-CyTzYVsZ.mjs').then(function (n) { return n.b; }).then((m) => m.AXMAssistMessageRendererComponent),
     canHandle: (message) => message.type === 'assist-response' || !!message.metadata?.['isAssistResponse'],
     capabilities: {
         supportsReactions: false,
@@ -14844,7 +15028,7 @@ async function axmOpenChatCallSessionDialog(options) {
     let scopedCallId = options.callId?.trim() || '';
     try {
         const opened = await dialogOpener.openPopup({
-            load: () => import('./acorex-platform-module-conversation-client-chat-call-session-page.component-DJreBgNo.mjs').then((module) => module.AXMChatCallSessionPageComponent),
+            load: () => import('./acorex-platform-module-conversation-client-chat-call-session-page.component-BbtiucQD.mjs').then((module) => module.AXMChatCallSessionPageComponent),
             data: {
                 conversationId: conversation.id,
                 callId: scopedCallId,
@@ -16964,7 +17148,7 @@ class AXMCommentsPageComponentProvider {
         return [
             {
                 key: COMMENTS_PAGE_COMPONENT_KEY,
-                loader: () => import('./acorex-platform-module-conversation-client-comments-page.component-BsE6bCZT.mjs').then((m) => m.AXMCommentsPageComponent),
+                loader: () => import('./acorex-platform-module-conversation-client-comments-page.component-Cgw3yLDs.mjs').then((m) => m.AXMCommentsPageComponent),
             },
         ];
     }
@@ -17270,19 +17454,19 @@ class AXMConversationModule {
             provideCommandSetups([
                 {
                     key: CONVERSATION_AFTER_MESSAGE_SENT_COMMAND,
-                    command: () => import('./acorex-platform-module-conversation-client-after-message-sent.command-JjZrYD2R.mjs').then((m) => m.AXMConversationAfterMessageSentCommand),
+                    command: () => import('./acorex-platform-module-conversation-client-after-message-sent.command-D21Bwrrp.mjs').then((m) => m.AXMConversationAfterMessageSentCommand),
                 },
                 {
                     key: CONVERSATION_RETRY_ASSIST_RESPONSE_COMMAND,
-                    command: () => import('./acorex-platform-module-conversation-client-retry-assist-response.command-BvzWaKX4.mjs').then((m) => m.AXMConversationRetryAssistResponseCommand),
+                    command: () => import('./acorex-platform-module-conversation-client-retry-assist-response.command-CaxrqIvP.mjs').then((m) => m.AXMConversationRetryAssistResponseCommand),
                 },
                 {
                     key: CONVERSATION_SYNC_READ_STATE_COMMAND,
-                    command: () => import('./acorex-platform-module-conversation-client-sync-read-state.command-DQXezGRu.mjs').then((m) => m.AXMConversationSyncReadStateCommand),
+                    command: () => import('./acorex-platform-module-conversation-client-sync-read-state.command-BFuJeJb5.mjs').then((m) => m.AXMConversationSyncReadStateCommand),
                 },
                 {
                     key: CONVERSATION_MARK_CONVERSATION_UNREAD_COMMAND,
-                    command: () => import('./acorex-platform-module-conversation-client-mark-conversation-unread.command-B1mvtbaA.mjs').then((m) => m.AXMConversationMarkConversationUnreadCommand),
+                    command: () => import('./acorex-platform-module-conversation-client-mark-conversation-unread.command-Cp6nnN8B.mjs').then((m) => m.AXMConversationMarkConversationUnreadCommand),
                 },
                 {
                     key: CONVERSATION_EMIT_TYPING_INDICATOR_COMMAND,
@@ -17294,7 +17478,7 @@ class AXMConversationModule {
                 },
                 {
                     key: CONVERSATION_OPEN_CHAT_COMMAND,
-                    command: () => import('./acorex-platform-module-conversation-client-open-chat.command-CbJ0gXZq.mjs').then((m) => m.AXMConversationOpenChatCommand),
+                    command: () => import('./acorex-platform-module-conversation-client-open-chat.command-Cyes1BAz.mjs').then((m) => m.AXMConversationOpenChatCommand),
                 },
                 {
                     key: 'show-comment-popup',
@@ -17413,19 +17597,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-JjZrYD2R.mjs').then((m) => m.AXMConversationAfterMessageSentCommand),
+                                command: () => import('./acorex-platform-module-conversation-client-after-message-sent.command-D21Bwrrp.mjs').then((m) => m.AXMConversationAfterMessageSentCommand),
                             },
                             {
                                 key: CONVERSATION_RETRY_ASSIST_RESPONSE_COMMAND,
-                                command: () => import('./acorex-platform-module-conversation-client-retry-assist-response.command-BvzWaKX4.mjs').then((m) => m.AXMConversationRetryAssistResponseCommand),
+                                command: () => import('./acorex-platform-module-conversation-client-retry-assist-response.command-CaxrqIvP.mjs').then((m) => m.AXMConversationRetryAssistResponseCommand),
                             },
                             {
                                 key: CONVERSATION_SYNC_READ_STATE_COMMAND,
-                                command: () => import('./acorex-platform-module-conversation-client-sync-read-state.command-DQXezGRu.mjs').then((m) => m.AXMConversationSyncReadStateCommand),
+                                command: () => import('./acorex-platform-module-conversation-client-sync-read-state.command-BFuJeJb5.mjs').then((m) => m.AXMConversationSyncReadStateCommand),
                             },
                             {
                                 key: CONVERSATION_MARK_CONVERSATION_UNREAD_COMMAND,
-                                command: () => import('./acorex-platform-module-conversation-client-mark-conversation-unread.command-B1mvtbaA.mjs').then((m) => m.AXMConversationMarkConversationUnreadCommand),
+                                command: () => import('./acorex-platform-module-conversation-client-mark-conversation-unread.command-Cp6nnN8B.mjs').then((m) => m.AXMConversationMarkConversationUnreadCommand),
                             },
                             {
                                 key: CONVERSATION_EMIT_TYPING_INDICATOR_COMMAND,
@@ -17437,7 +17621,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-CbJ0gXZq.mjs').then((m) => m.AXMConversationOpenChatCommand),
+                                command: () => import('./acorex-platform-module-conversation-client-open-chat.command-Cyes1BAz.mjs').then((m) => m.AXMConversationOpenChatCommand),
                             },
                             {
                                 key: 'show-comment-popup',
@@ -17473,4 +17657,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-CmRULmpl.mjs.map
+//# sourceMappingURL=acorex-platform-module-conversation-client-acorex-platform-module-conversation-client-Be9CB1WQ.mjs.map