@acorex-platform/module-conversation-client 0.0.59 → 0.0.60

package/fesm2022/{acorex-platform-module-conversation-client-acorex-platform-module-conversation-client-1tv00m7Y.mjs → acorex-platform-module-conversation-client-acorex-platform-module-conversation-client-CmRULmpl.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, 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, 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 { 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';
@@ -34,7 +34,7 @@ import { AXBadgeModule } from '@acorex/components/badge';
 import * as i2 from '@acorex/components/decorators';
 import { AXDecoratorModule } from '@acorex/components/decorators';
 import * as i5 from '@acorex/core/format';
-import { AXFormatModule } from '@acorex/core/format';
+import { AXFormatModule, AXFormatService } from '@acorex/core/format';
 import { AXDialogService } from '@acorex/components/dialog';
 import { AXPopupService, AXPopupCaptionIconComponent, AXPopupComponentBase, AXPopupDockComponent } from '@acorex/components/popup';
 import { AXDragHandleDirective } from '@acorex/cdk/drag-drop';
@@ -46,21 +46,14 @@ import { AXPlatform } from '@acorex/core/platform';
 import { AXFabComponent, AXFabItemComponent } from '@acorex/components/fab';
 import { AXPInAppInboxConnectorService, isInAppInboxUnread, AXPCommunicationManagementClient, AXPInAppInboxRealtimeService } from '@acorex-platform/module-communication-management-client';
 import { axpAiChatMessageIsDelegatedReflectionExcluded, axpAiExtractChatWidgetNodeFromUnknown, axpAiDelegatedAgentResultSegments, AXPAiManagerService, AXPAiChatToolRunContextService, AXPAiPlatformRuntimeContextBuilder, AIMANAGEMENT_STRUCTURED_TEXT_COMPLETION_COMMAND_KEY, axpAiChatTextMessage, persistAiChatAttachmentImage, AIMANAGEMENT_CHAT_TRANSCRIBE_SPEECH_COMMAND_KEY, AXPAiAssistChatModelCatalogService } from '@acorex-platform/module-ai-management-client';
-import * as i1$3 from '@acorex/components/text-editor';
-import { AXTextEditorModule } from '@acorex/components/text-editor';
-import { trigger, transition, style, animate } from '@angular/animations';
-import { DomSanitizer } from '@angular/platform-browser';
-import { AXAvatarModule } from '@acorex/components/avatar';
 import * as i4 from '@acorex/components/comment';
-import { AXCommentModule } from '@acorex/components/comment';
-import * as i7 from '@acorex/components/dropdown';
-import { AXDropdownModule } from '@acorex/components/dropdown';
+import { AXCommentViewComponent, AXCommentContainerComponent, AXCommentModule } from '@acorex/components/comment';
+import * as i7 from '@acorex/components/dropdown-button';
 import { AXDropdownButtonModule } from '@acorex/components/dropdown-button';
-import { AXFormModule } from '@acorex/components/form';
-import { AXImageModule } from '@acorex/components/image';
-import * as i6 from '@acorex/components/loading';
+import * as i8 from '@acorex/components/loading';
 import { AXLoadingModule } from '@acorex/components/loading';
-import { AXToolBarModule } from '@acorex/components/toolbar';
+import * as i1$3 from '@acorex/components/text-editor';
+import { AXTextEditorComponent, AXTextEditorModule } from '@acorex/components/text-editor';
 import * as i1$4 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
 import { AXPEntityCommandScope } from '@acorex-platform/framework-shared/entity';
@@ -12393,11 +12386,16 @@ function buildCommentInAppNotificationRequest(thread, comment, receiver) {
 }
 //#endregion
 
-const HIGHLIGHT_DURATION_MS = 2500;
+//#region ----- Imports -----
+//#endregion
+//#region ----- Constants -----
 const SUBMIT_COOLDOWN_MS = 100;
+const AVATAR_COLORS = ['primary', 'success', 'warning', 'danger'];
+//#endregion
+//#region ----- Component -----
 class AXMCommentComponent {
     constructor() {
-        //#region ---- Inputs ----
+        //#region ----- Inputs -----
         this.refrenceType = input.required(/* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "refrenceType" }] : /* istanbul ignore next */ []));
         this.refrenceId = input.required(/* @ts-ignore */
@@ -12405,45 +12403,41 @@ class AXMCommentComponent {
         this.subject = input.required(/* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "subject" }] : /* istanbul ignore next */ []));
         //#endregion
-        //#region ---- State Signals ----
+        //#region ----- State Signals -----
         this.moduleName = signal(undefined, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "moduleName" }] : /* istanbul ignore next */ []));
         this.entityName = signal(undefined, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "entityName" }] : /* istanbul ignore next */ []));
         this.hasCooldown = signal(false, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "hasCooldown" }] : /* istanbul ignore next */ []));
-        this.commentContent = signal('', /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "commentContent" }] : /* istanbul ignore next */ []));
+        this.draft = signal('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "draft" }] : /* istanbul ignore next */ []));
         this.isSubmitting = signal(false, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "isSubmitting" }] : /* istanbul ignore next */ []));
-        this.isReplyingMode = signal(false, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "isReplyingMode" }] : /* istanbul ignore next */ []));
-        this.isEditingMode = signal(false, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "isEditingMode" }] : /* istanbul ignore next */ []));
         this.isLoading = signal(true, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "isLoading" }] : /* istanbul ignore next */ []));
-        this.activeReplyComment = signal(undefined, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "activeReplyComment" }] : /* istanbul ignore next */ []));
-        this.activeEditComment = signal(undefined, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "activeEditComment" }] : /* istanbul ignore next */ []));
-        this.highlightedCommentId = signal(null, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "highlightedCommentId" }] : /* istanbul ignore next */ []));
+        this.replyingTo = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "replyingTo" }] : /* istanbul ignore next */ []));
+        this.editing = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "editing" }] : /* istanbul ignore next */ []));
         this.expandedCommentIds = signal(new Set(), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "expandedCommentIds" }] : /* istanbul ignore next */ []));
         this.comments = signal([], /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "comments" }] : /* istanbul ignore next */ []));
+        this.commentItems = signal([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "commentItems" }] : /* istanbul ignore next */ []));
         this.thread = signal(undefined, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "thread" }] : /* istanbul ignore next */ []));
-        this.editorOptions = signal({
-            look: 'solid',
-        }, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "editorOptions" }] : /* istanbul ignore next */ []));
+        this.commentActions = signal([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "commentActions" }] : /* istanbul ignore next */ []));
+        this.refreshGeneration = 0;
         //#endregion
-        //#region ---- View Children ----
-        this.editorRef = viewChild.required('editorRef', /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "editorRef" }] : /* istanbul ignore next */ []));
+        //#region ----- View Children -----
+        this.commentsView = viewChild('commentsView', { ...(ngDevMode ? { debugName: "commentsView" } : /* istanbul ignore next */ {}), read: AXCommentViewComponent });
+        this.commentContainer = viewChild('commentContainer', { ...(ngDevMode ? { debugName: "commentContainer" } : /* istanbul ignore next */ {}), read: AXCommentContainerComponent });
+        this.editor = viewChild('commentEditor', { ...(ngDevMode ? { debugName: "editor" } : /* istanbul ignore next */ {}), read: AXTextEditorComponent });
         //#endregion
-        //#region ---- Services & Dependencies ----
+        //#region ----- Services & Dependencies -----
         this.commentService = inject(AXMCommentManagementService);
         this.realtimeService = inject(AXMCommentRealtimeService);
         this.sessionService = inject(AXPSessionService);
@@ -12452,39 +12446,43 @@ class AXMCommentComponent {
         this.inAppNotificationService = inject(AXP_IN_APP_NOTIFICATION_SERVICE, {
             optional: true,
         });
-        this.router = inject(Router);
         this.activatedRoute = inject(ActivatedRoute);
-        this.sanitizer = inject(DomSanitizer);
         this.translationService = inject(AXTranslationService);
         this.destroyRef = inject(DestroyRef);
-        this.elementRef = inject(ElementRef);
+        this.userAvatarService = inject(AXPUserAvatarService);
+        this.fileStorage = inject(AXPFileStorageService);
+        this.formatService = inject(AXFormatService);
+        this.profileCache = new Map();
     }
     //#endregion
-    //#region ---- Lifecycle ----
+    //#region ----- Lifecycle -----
     ngOnInit() {
         this.moduleName.set(this.activatedRoute.snapshot.params['module'] || null);
         this.entityName.set(this.activatedRoute.snapshot.params['entity'] || null);
-        this.loadComments().finally(() => {
-            setTimeout(() => this.isLoading.set(false), 250);
-        });
+        void this.initialize();
         this.realtimeService.comment$
             .pipe(takeUntilDestroyed(this.destroyRef), filter((event) => !!event))
             .subscribe((event) => {
             switch (event.type) {
                 case 'add':
-                    this.handleAddComment(event.payload);
+                    void this.handleAddComment(event.payload);
                     break;
                 case 'update':
-                    this.handleUpdateComment(event.payload);
+                    void this.handleUpdateComment(event.payload);
                     break;
                 case 'remove':
-                    this.removeMessageById(event.payload);
+                    void this.removeMessageById(event.payload);
                     break;
             }
         });
     }
     //#endregion
-    //#region ---- Data Loading ----
+    //#region ----- Data Loading -----
+    async initialize() {
+        await this.loadActionItems();
+        await this.loadComments();
+        this.isLoading.set(false);
+    }
     async loadComments() {
         try {
             const entityRef = {
@@ -12503,44 +12501,138 @@ class AXMCommentComponent {
                 this.thread.set(newThread);
                 this.comments.set(newThread.comments || []);
             }
+            await this.refreshItems();
         }
         catch (error) {
             console.error('Failed to load comments:', error);
             this.showTranslatedToast('messages.error.load-comments', 'danger');
             this.comments.set([]);
+            this.commentItems.set([]);
         }
     }
     //#endregion
-    //#region ---- Comment Actions ----
-    /** Opens edit mode for the target comment (or its reply). */
-    editMessage(comment, reply, userName) {
-        const target = reply || comment;
-        this.isReplyingMode.set(false);
-        this.activeReplyComment.set(undefined);
-        this.isEditingMode.set(true);
-        this.activeEditComment.set({ ...target, userName: userName || '' });
-        this.commentContent.set(axmExtractTextFromPayload(target.payload));
-        this.editorRef()
-            .getHostElement()
-            .scrollIntoView({ behavior: 'smooth', block: 'start' });
-    }
-    /** Opens reply mode, optionally mentioning a specific reply author. */
-    replyMessage(comment, reply, userName) {
-        this.isEditingMode.set(false);
-        this.activeEditComment.set(undefined);
-        this.isReplyingMode.set(true);
-        this.activeReplyComment.set({ ...comment, userName: userName || '' });
-        if (reply) {
-            const mention = `<strong><a data-id="${reply.senderId}">@${userName || reply.senderId}</a></strong> `;
-            this.commentContent.set(mention);
-            this.setEditorContent(mention);
-            this.editorRef()?.focus();
-        }
-        this.editorRef()
-            .getHostElement()
-            .scrollIntoView({ behavior: 'smooth', block: 'start' });
+    //#region ----- Event Handlers -----
+    onReply(event) {
+        const wasEditing = this.editing();
+        this.editing.set(null);
+        this.replyingTo.set(event.item);
+        if (wasEditing) {
+            this.draft.set('');
+            this.editor()?.setContent('', true);
+            return;
+        }
+        setTimeout(() => this.editor()?.focus());
     }
-    async deleteComment(commentId) {
+    cancelReply() {
+        this.replyingTo.set(null);
+    }
+    cancelEdit() {
+        this.editing.set(null);
+        this.draft.set('');
+        this.editor()?.setContent('', false);
+    }
+    onLikeChange(event) {
+        void this.persistLikeChange(event);
+    }
+    onRepliesToggle(event) {
+        this.onRepliesExpandedChange(String(event.item.id), event.expanded);
+    }
+    onAction(event) {
+        if (event.action.name === 'edit') {
+            this.edit(event.item);
+        }
+        if (event.action.name === 'delete') {
+            void this.remove(event.item);
+        }
+    }
+    commentSenderId(item) {
+        const data = item.data;
+        return data?.senderId ?? '';
+    }
+    onOverflowAction(item, name) {
+        if (name === 'edit') {
+            this.edit(item);
+        }
+        if (name === 'delete') {
+            void this.remove(item);
+        }
+    }
+    scrollToCommentContext(item) {
+        this.commentContainer()?.scrollToReply(String(item.id));
+    }
+    commentContextPreview(content) {
+        return stripHtmlToPlainText(content ?? '');
+    }
+    async submitComment() {
+        this.isSubmitting.set(true);
+        try {
+            const currentThread = this.thread();
+            if (!currentThread) {
+                return;
+            }
+            const content = this.readEditorHtml();
+            if (stripHtmlToPlainText(content).length === 0) {
+                return;
+            }
+            if (this.editing()?.id) {
+                const commentId = String(this.editing().id);
+                const updated = await this.commentService.editComment(commentId, content);
+                await this.handleUpdateComment(updated);
+                this.hasCooldown.set(true);
+                this.editing.set(null);
+            }
+            else {
+                const parent = this.replyingTo();
+                const parentCommentId = parent ? String(parent.id) : undefined;
+                if (parent && this.commentsView() && !this.commentsView()?.findItem(parentCommentId)) {
+                    return;
+                }
+                const newComment = await this.commentService.addComment(currentThread.id, content, parentCommentId);
+                this.hasCooldown.set(true);
+                if (parentCommentId) {
+                    this.expandReplies(parentCommentId);
+                    this.replyingTo.set(null);
+                }
+                if (newComment?.id) {
+                    await this.refreshItems();
+                    setTimeout(() => this.commentContainer()?.scrollToReply(String(newComment.id)));
+                }
+            }
+            this.draft.set('');
+            this.editor()?.setContent('', false);
+            setTimeout(() => this.hasCooldown.set(false), SUBMIT_COOLDOWN_MS);
+        }
+        catch (error) {
+            console.error('Error submitting comment:', error);
+            if (typeof error === 'string') {
+                this.showToast(error, 'danger');
+            }
+            else {
+                this.showTranslatedToast('messages.error.submit-comment', 'danger');
+            }
+        }
+        finally {
+            this.isSubmitting.set(false);
+        }
+    }
+    isCommentDraftEmpty() {
+        const service = this.editor()?.getEditorService();
+        if (service) {
+            return service.isEmpty() || service.getText().trim().length === 0;
+        }
+        return stripHtmlToPlainText(this.draft()).length === 0;
+    }
+    //#endregion
+    //#region ----- Edit & Delete -----
+    edit(item) {
+        this.replyingTo.set(null);
+        this.editing.set(item);
+        const html = item.content ?? '';
+        this.draft.set(html);
+        this.editor()?.setContent(html, true);
+    }
+    async remove(item) {
+        const commentId = String(item.id);
         const [dialogTitle, dialogMessage, deleteText, deletingText, cancelText] = await Promise.all([
             this.t('confirmations.delete-comment.title'),
             this.t('confirmations.delete-comment.message'),
@@ -12548,6 +12640,13 @@ class AXMCommentComponent {
             this.t('confirmations.delete-comment.deleting'),
             this.t('actions.cancel.title'),
         ]);
+        const cancelButton = {
+            text: cancelText,
+            color: 'default',
+            autofocus: true,
+            disabled: false,
+            onClick: () => dialog.close(),
+        };
         const dialog = this.dialogService.open({
             icon: 'fa-regular fa-warning',
             content: dialogMessage,
@@ -12559,21 +12658,30 @@ class AXMCommentComponent {
                     text: deleteText,
                     color: 'danger',
                     onClick: async (e) => {
+                        if (!e) {
+                            return;
+                        }
                         e.handled = true;
                         e.source.text = deletingText;
                         e.source.disabled = true;
                         e.source.loading = true;
+                        cancelButton.disabled = true;
                         try {
                             await this.commentService.deleteComment(commentId);
-                            this.removeMessageById(commentId);
                             this.showTranslatedToast('messages.success.comment-deleted', 'success');
-                            if (this.isEditingMode() &&
-                                this.activeEditComment()?.id === commentId) {
-                                this.resetReplyEditState();
+                            if (this.editing()?.id === commentId) {
+                                this.cancelEdit();
+                            }
+                            if (this.replyingTo()?.id === commentId) {
+                                this.cancelReply();
                             }
                             dialog.close();
                         }
                         catch (error) {
+                            cancelButton.disabled = false;
+                            e.source.text = deleteText;
+                            e.source.disabled = false;
+                            e.source.loading = false;
                             if (typeof error === 'string') {
                                 this.showToast(error, 'danger');
                             }
@@ -12583,98 +12691,43 @@ class AXMCommentComponent {
                         }
                     },
                 },
-                {
-                    text: cancelText,
-                    color: 'default',
-                    autofocus: true,
-                    onClick: () => dialog.close(),
-                },
+                cancelButton,
             ],
             closeButton: false,
         });
     }
-    resetReplyEditState() {
-        this.isEditingMode.set(false);
-        this.activeEditComment.set(undefined);
-        this.isReplyingMode.set(false);
-        this.activeReplyComment.set(undefined);
-        this.commentContent.set('');
-        this.clearEditorContent();
-    }
-    async submitComment() {
-        this.isSubmitting.set(true);
-        try {
-            const currentThread = this.thread();
-            if (!currentThread)
-                return;
-            if (this.isEditingMode() && this.activeEditComment()?.id) {
-                await this.commentService.editComment(this.activeEditComment().id, this.commentContent());
-                this.hasCooldown.set(true);
-                this.isEditingMode.set(false);
-                this.activeEditComment.set(undefined);
-            }
-            else {
-                const parentCommentId = this.activeReplyComment()?.id;
-                const newComment = await this.commentService.addComment(currentThread.id, this.commentContent(), parentCommentId);
-                this.hasCooldown.set(true);
-                if (parentCommentId) {
-                    this.expandReplies(parentCommentId);
-                }
-                this.isReplyingMode.set(false);
-                this.activeReplyComment.set(undefined);
-                if (newComment?.id) {
-                    this.scrollToAndHighlight(newComment.id);
-                }
-            }
-            this.commentContent.set('');
-            this.clearEditorContent();
-            setTimeout(() => this.hasCooldown.set(false), SUBMIT_COOLDOWN_MS);
-        }
-        catch (error) {
-            console.error('Error submitting comment:', error);
-            if (typeof error === 'string') {
-                this.showToast(error, 'danger');
-            }
-            else {
-                this.showTranslatedToast('messages.error.submit-comment', 'danger');
-            }
-        }
-        finally {
-            this.isSubmitting.set(false);
-        }
-    }
     //#endregion
-    //#region ---- Reactions ----
-    async toggleLike(comment) {
-        const isLiked = this.isLikedByUser(comment);
-        this.updateLikeStatus(comment.id, !isLiked);
+    //#region ----- Reactions -----
+    async persistLikeChange(event) {
+        const commentId = String(event.item.id);
         try {
-            if (isLiked) {
-                await this.commentService.unlikeComment(comment.id);
+            if (event.liked) {
+                await this.commentService.likeComment(commentId);
             }
             else {
-                await this.commentService.likeComment(comment.id);
+                await this.commentService.unlikeComment(commentId);
             }
         }
         catch (error) {
             console.error('Failed to toggle like:', error);
-            this.updateLikeStatus(comment.id, isLiked);
+            this.commentsView()?.updateItem(commentId, {
+                liked: !event.liked,
+                likes: event.liked ? Math.max(0, (event.likes ?? 1) - 1) : (event.likes ?? 0) + 1,
+            });
         }
     }
     isLikedByUser(comment) {
         const user = this.getCurrentUser();
-        if (!user)
+        if (!user) {
             return false;
+        }
         return (comment.reactions || []).some((r) => r.userId === user.id && r.emoji === AXM_COMMENT_LIKE_EMOJI);
     }
     getReactionsCount(comment) {
         return (comment.reactions || []).filter((r) => r.emoji === AXM_COMMENT_LIKE_EMOJI).length;
     }
     //#endregion
-    //#region ---- Replies Expansion ----
-    isRepliesExpanded(commentId) {
-        return this.expandedCommentIds().has(commentId);
-    }
+    //#region ----- Replies Expansion -----
     onRepliesExpandedChange(commentId, expanded) {
         this.expandedCommentIds.update((ids) => {
             const next = new Set(ids);
@@ -12695,66 +12748,22 @@ class AXMCommentComponent {
         });
     }
     //#endregion
-    //#region ---- Scroll & Highlight ----
-    /**
-     * Scrolls to the referenced comment and triggers a highlight pulse animation.
-     * Expands parent replies if needed to ensure the target is in the DOM.
-     */
-    scrollMain() {
-        const comment = this.isReplyingMode()
-            ? this.activeReplyComment()
-            : this.activeEditComment();
-        if (!comment?.id)
-            return;
-        if (comment.replyTo?.id) {
-            this.expandReplies(comment.replyTo.id);
-        }
-        this.scrollToAndHighlight(comment.id);
-    }
-    /**
-     * Scrolls to a comment element and applies a highlight pulse animation.
-     * Uses setTimeout to wait for Angular to render after signal updates.
-     */
-    scrollToAndHighlight(commentId) {
-        this.highlightedCommentId.set(null);
-        setTimeout(() => {
-            const el = this.elementRef.nativeElement.querySelector(`ax-comment-item[id="${commentId}"]`);
-            if (!el)
-                return;
-            el.scrollIntoView({ behavior: 'smooth', block: 'center' });
-            this.highlightedCommentId.set(commentId);
-            setTimeout(() => this.highlightedCommentId.set(null), HIGHLIGHT_DURATION_MS);
-        });
-    }
-    //#endregion
-    //#region ---- HTML Sanitization ----
-    sanitizeHtml(htmlContent) {
-        if (!htmlContent)
-            return this.sanitizer.bypassSecurityTrustHtml('');
-        return this.sanitizer.bypassSecurityTrustHtml(htmlContent);
-    }
-    //#endregion
-    //#region ---- Realtime Event Handlers ----
-    handleAddComment(comment) {
+    //#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));
         }
         const parentId = comment.replyTo?.id;
         if (parentId) {
             this.expandReplies(parentId);
-            this.comments.update((comments) => comments.map((c) => {
-                if (c.id === parentId) {
-                    const newReplies = c.replies ? [...c.replies, comment] : [comment];
-                    return { ...c, replies: newReplies, replyCount: newReplies.length };
-                }
-                return c;
-            }));
+            this.comments.update((comments) => insertReply(comments, parentId, comment));
         }
         else {
             this.comments.update((comments) => [...comments, comment]);
         }
+        await this.refreshItems();
     }
-    handleUpdateComment(updatedComment) {
+    async handleUpdateComment(updatedComment) {
         const update = (list) => list.map((c) => {
             if (c.id === updatedComment.id) {
                 return {
@@ -12771,39 +12780,15 @@ class AXMCommentComponent {
             return c;
         });
         this.comments.update((comments) => update(comments));
+        await this.refreshItems();
     }
     //#endregion
-    //#region ---- Private Helpers ----
+    //#region ----- Private Helpers -----
     getCurrentUser() {
         const user = this.sessionService.user;
         return user ? { id: user.id, type: 'user' } : null;
     }
-    updateLikeStatus(commentId, willBeLiked) {
-        const findAndToggle = (comments) => comments.map((c) => {
-            if (c.id === commentId) {
-                const user = this.getCurrentUser();
-                if (!user)
-                    return c;
-                const reactions = willBeLiked
-                    ? [
-                        ...(c.reactions || []),
-                        {
-                            emoji: AXM_COMMENT_LIKE_EMOJI,
-                            userId: user.id,
-                            timestamp: new Date(),
-                        },
-                    ]
-                    : (c.reactions || []).filter((r) => r.userId !== user.id || r.emoji !== AXM_COMMENT_LIKE_EMOJI);
-                return { ...c, reactions };
-            }
-            if (c.replies?.length) {
-                return { ...c, replies: findAndToggle(c.replies) };
-            }
-            return c;
-        });
-        this.comments.update((comments) => findAndToggle(comments));
-    }
-    removeMessageById(commentId) {
+    async removeMessageById(commentId) {
         const filterOut = (comments) => comments
             .filter((c) => c.id !== commentId)
             .map((c) => {
@@ -12813,14 +12798,107 @@ class AXMCommentComponent {
             return c;
         });
         this.comments.update((comments) => filterOut(comments));
+        await this.refreshItems();
+    }
+    readEditorHtml() {
+        const service = this.editor()?.getEditorService();
+        if (service && !service.isEmpty()) {
+            return service.getHTML();
+        }
+        return this.draft();
+    }
+    async loadActionItems() {
+        const [editText, deleteText] = await Promise.all([this.t('actions.edit.title'), this.t('actions.delete.title')]);
+        this.commentActions.set([
+            { name: 'edit', text: editText, icon: 'fa-light fa-pen', break: true },
+            { name: 'delete', text: deleteText, icon: 'fa-light fa-trash-can', color: 'danger' },
+        ]);
+    }
+    async refreshItems() {
+        const generation = ++this.refreshGeneration;
+        const items = await Promise.all(this.comments().map((comment) => this.mapComment(comment)));
+        if (generation !== this.refreshGeneration) {
+            return;
+        }
+        this.commentItems.set(items);
+    }
+    async mapComment(comment) {
+        const profile = await this.resolveProfile(comment.senderId);
+        const currentUserId = this.getCurrentUser()?.id;
+        const replies = comment.replies?.length ? await Promise.all(comment.replies.map((reply) => this.mapComment(reply))) : undefined;
+        const isYou = !!currentUserId && comment.senderId === currentUserId;
+        const editedAt = comment.editedAt;
+        return {
+            id: comment.id,
+            author: profile.author,
+            avatar: profile.avatar,
+            initials: profile.initials,
+            color: profile.color,
+            date: this.formatCommentDate(comment.timestamp),
+            edited: !!editedAt,
+            editedAt: editedAt ? this.formatCommentDate(editedAt) : undefined,
+            content: axmExtractTextFromPayload(comment.payload),
+            likes: this.getReactionsCount(comment),
+            liked: this.isLikedByUser(comment),
+            isYou,
+            repliesExpanded: this.expandedCommentIds().has(comment.id),
+            replies,
+            replyCount: comment.replyCount ?? replies?.length ?? 0,
+            actions: isYou ? this.commentActions() : undefined,
+            data: comment,
+        };
+    }
+    async resolveProfile(userId) {
+        const cached = this.profileCache.get(userId);
+        if (cached) {
+            return cached;
+        }
+        try {
+            const info = await this.userAvatarService.getUserInfo(userId);
+            const author = resolveDisplayName(info) || userId;
+            const avatar = this.resolveAvatarUrl(info.avatarUrl, userId) || undefined;
+            const profile = {
+                author,
+                initials: toInitials(author),
+                avatar,
+                color: colorForUser(userId),
+            };
+            this.profileCache.set(userId, profile);
+            return profile;
+        }
+        catch {
+            return {
+                author: userId,
+                initials: toInitials(userId),
+                color: colorForUser(userId),
+            };
+        }
     }
-    clearEditorContent() {
-        this.editorRef()?.getEditorService().clearContent();
+    resolveAvatarUrl(avatarUrl, userId) {
+        const sessionUser = this.sessionService.user;
+        const isSessionUser = sessionUser?.id === userId;
+        let ref = isSessionUser ? normalizeStoredImageRef(sessionUser.avatar) : null;
+        if (!ref) {
+            ref = normalizeStoredImageRef(avatarUrl);
+        }
+        if (!ref) {
+            return '';
+        }
+        if (!isStoredImageFileId(ref)) {
+            return ref;
+        }
+        return this.userAvatarService.resolveAvatarDisplayUrl(ref, (fileId) => this.fileStorage.getDownloadUrl(fileId));
     }
-    setEditorContent(html) {
-        this.editorRef()?.getEditorService().setContent(html || '', false);
+    formatCommentDate(timestamp) {
+        if (!timestamp) {
+            return '';
+        }
+        const date = timestamp instanceof Date ? timestamp : new Date(timestamp);
+        if (Number.isNaN(date.getTime())) {
+            return '';
+        }
+        return this.formatService.format(date, 'timeleft');
     }
-    /** Shorthand translator scoped to the comments feature */
     t(key) {
         return this.translationService.translateAsync(`@conversation:comments.${key}`);
     }
@@ -12838,50 +12916,75 @@ class AXMCommentComponent {
         const content = await this.t(key);
         this.showToast(content, color);
     }
-    getCommentText(comment) {
-        return axmExtractTextFromPayload(comment.payload);
-    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXMCommentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXMCommentComponent, isStandalone: true, selector: "axm-comment", inputs: { refrenceType: { classPropertyName: "refrenceType", publicName: "refrenceType", isSignal: true, isRequired: true, transformFunction: null }, refrenceId: { classPropertyName: "refrenceId", publicName: "refrenceId", isSignal: true, isRequired: true, transformFunction: null }, subject: { classPropertyName: "subject", publicName: "subject", isSignal: true, isRequired: true, transformFunction: null } }, viewQueries: [{ propertyName: "editorRef", first: true, predicate: ["editorRef"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"axm-comment size-full flex flex-col overflow-hidden\">\n  <div class=\"axm-comment__list flex-1 min-h-0 overflow-y-auto\">\n    <ax-comment-container>\n      @if (isLoading()) {\n        <div class=\"axm-comment__skeleton\">\n          <ax-skeleton class=\"size-10 shrink-0 rounded-full\"></ax-skeleton>\n          <div class=\"axm-comment__skeleton-body\">\n            <ax-skeleton class=\"h-4 w-32 rounded\"></ax-skeleton>\n            <ax-skeleton class=\"h-3 w-full rounded-full\"></ax-skeleton>\n            <ax-skeleton class=\"h-3 w-11/12 rounded-full\"></ax-skeleton>\n            <ax-skeleton class=\"h-3 w-4/5 rounded-full\"></ax-skeleton>\n          </div>\n        </div>\n      } @else if (comments().length > 0) {\n        <ax-comment-view class=\"axm-comment__view\">\n          @for (comment of comments(); track comment.id) {\n            <ax-comment-item\n              [id]=\"comment.id!\"\n              [replyCount]=\"comment.replyCount\"\n              [repliesExpanded]=\"isRepliesExpanded(comment.id!)\"\n              (repliesExpandedChange)=\"\n                onRepliesExpandedChange(comment.id!, $event)\n              \"\n              [class.highlighted]=\"highlightedCommentId() === comment.id\"\n              [@fadeIn]\n            >\n              <axp-user-avatar\n                #user\n                [size]=\"36\"\n                [userId]=\"comment.senderId\"\n                [axpUserCard]=\"comment.senderId\"\n                ngProjectAs=\"'ax-avatar'\"\n              ></axp-user-avatar>\n              <ax-title class=\"axm-comment__author\" [axpUserCard]=\"comment.senderId\">{{\n                user.title()\n              }}</ax-title>\n              <ax-comment-date class=\"axm-comment__date\">\n                {{ comment.timestamp | format: 'timeleft' | async }}\n              </ax-comment-date>\n              <ax-comment-menu-options>\n                <ax-button\n                  class=\"axm-comment__menu-btn ax-sm\"\n                  look=\"blank\"\n                  color=\"neutral\"\n                >\n                  <ax-icon icon=\"fa-regular fa-ellipsis\"></ax-icon>\n                </ax-button>\n                <ax-dropdown-panel>\n                  <ax-button-item-list>\n                    <ax-button-item\n                      [text]=\"\n                        ('@conversation:comments.actions.edit.title'\n                          | translate\n                          | async) ?? ''\n                      \"\n                      color=\"neutral\"\n                      (click)=\"editMessage(comment, undefined, user.title())\"\n                    >\n                      <ax-prefix>\n                        <ax-icon icon=\"fa-light fa-pen\"></ax-icon>\n                      </ax-prefix>\n                    </ax-button-item>\n                    <ax-button-item\n                      [text]=\"\n                        ('@conversation:comments.actions.delete.title'\n                          | translate\n                          | async) ?? ''\n                      \"\n                      color=\"danger\"\n                      (click)=\"deleteComment(comment.id!)\"\n                    >\n                      <ax-prefix>\n                        <ax-icon icon=\"fa-light fa-trash-can\"></ax-icon>\n                      </ax-prefix>\n                    </ax-button-item>\n                  </ax-button-item-list>\n                </ax-dropdown-panel>\n              </ax-comment-menu-options>\n              <ax-content\n                [innerHTML]=\"sanitizeHtml(getCommentText(comment))\"\n              ></ax-content>\n              <ax-comment-like\n                (click)=\"toggleLike(comment)\"\n                [like]=\"isLikedByUser(comment)\"\n              >\n                {{ getReactionsCount(comment) }}\n              </ax-comment-like>\n              <ax-comment-reply-text\n                (click)=\"replyMessage(comment, undefined, user.title())\"\n              ></ax-comment-reply-text>\n\n              @for (reply of comment.replies; track reply.id) {\n                <ax-comment-item\n                  [id]=\"reply.id\"\n                  [class.highlighted]=\"highlightedCommentId() === reply.id\"\n                  [@fadeIn]\n                >\n                  <axp-user-avatar\n                    #replyUser\n                    [size]=\"36\"\n                    [userId]=\"reply.senderId\"\n                    [axpUserCard]=\"reply.senderId\"\n                    ngProjectAs=\"'ax-avatar'\"\n                  ></axp-user-avatar>\n                  <ax-title class=\"axm-comment__author\" [axpUserCard]=\"reply.senderId\">{{\n                    replyUser.title()\n                  }}</ax-title>\n                  <ax-comment-date class=\"axm-comment__date\">\n                    {{ reply.timestamp | format: 'timeleft' | async }}\n                  </ax-comment-date>\n                  <ax-comment-menu-options>\n                    <ax-button\n                      class=\"axm-comment__menu-btn ax-sm\"\n                      look=\"blank\"\n                      color=\"neutral\"\n                    >\n                      <ax-icon icon=\"fa-regular fa-ellipsis\"></ax-icon>\n                    </ax-button>\n                    <ax-dropdown-panel>\n                      <ax-button-item-list>\n                        <ax-button-item\n                          [text]=\"\n                            ('@conversation:comments.actions.edit.title'\n                              | translate\n                              | async) ?? ''\n                          \"\n                          color=\"neutral\"\n                          (click)=\"\n                            editMessage(comment, reply, replyUser.title())\n                          \"\n                        >\n                          <ax-prefix>\n                            <ax-icon icon=\"fa-light fa-pen\"></ax-icon>\n                          </ax-prefix>\n                        </ax-button-item>\n                        <ax-button-item\n                          [text]=\"\n                            ('@conversation:comments.actions.delete.title'\n                              | translate\n                              | async) ?? ''\n                          \"\n                          color=\"danger\"\n                          (click)=\"deleteComment(reply.id!)\"\n                        >\n                          <ax-prefix>\n                            <ax-icon icon=\"fa-light fa-trash-can\"></ax-icon>\n                          </ax-prefix>\n                        </ax-button-item>\n                      </ax-button-item-list>\n                    </ax-dropdown-panel>\n                  </ax-comment-menu-options>\n                  <ax-content\n                    [innerHTML]=\"sanitizeHtml(getCommentText(reply))\"\n                  ></ax-content>\n                  <ax-comment-like\n                    (click)=\"toggleLike(reply)\"\n                    [like]=\"isLikedByUser(reply)\"\n                  >\n                    {{ getReactionsCount(reply) }}\n                  </ax-comment-like>\n                  <ax-comment-reply-text\n                    (click)=\"replyMessage(comment, reply, replyUser.title())\"\n                  ></ax-comment-reply-text>\n                </ax-comment-item>\n              }\n            </ax-comment-item>\n          }\n        </ax-comment-view>\n      }\n      <!-- ----- Empty state when no comments exist ----- -->\n      @else {\n        <axp-state-message\n          icon=\"fa-light fa-comments\"\n          [title]=\"\n            '@conversation:comments.components.comment.empty-states.no-comments.title'\n          \"\n          [description]=\"\n            '@conversation:comments.components.comment.empty-states.no-comments.description'\n          \"\n        >\n        </axp-state-message>\n      }\n    </ax-comment-container>\n  </div>\n\n  <div class=\"axm-comment__composer\">\n    @if (isReplyingMode() || isEditingMode()) {\n      <div class=\"axm-comment__context\">\n        <button\n          type=\"button\"\n          class=\"axm-comment__context-main\"\n          (click)=\"scrollMain()\"\n        >\n          <i\n            class=\"fa-light axm-comment__context-icon\"\n            [class.fa-reply]=\"isReplyingMode()\"\n            [class.fa-pen]=\"isEditingMode()\"\n          ></i>\n          <div class=\"axm-comment__context-copy\">\n            <p class=\"axm-comment__context-label\">\n              @if (isReplyingMode()) {\n                {{\n                  '@conversation:comments.actions.reply-to' | translate | async\n                }}\n                <span>{{ activeReplyComment()?.userName }}</span>\n              } @else {\n                {{\n                  '@conversation:comments.actions.edit-message'\n                    | translate\n                    | async\n                }}\n              }\n            </p>\n            <div\n              class=\"axm-comment__context-preview\"\n              [innerHTML]=\"\n                isReplyingMode()\n                  ? sanitizeHtml(getCommentText(activeReplyComment()!))\n                  : sanitizeHtml(getCommentText(activeEditComment()!))\n              \"\n            ></div>\n          </div>\n        </button>\n        <button\n          type=\"button\"\n          class=\"axm-comment__context-close\"\n          (click)=\"resetReplyEditState()\"\n          [attr.aria-label]=\"\n            ('@conversation:comments.actions.cancel.title'\n              | translate\n              | async) ?? 'Cancel'\n          \"\n        >\n          <i class=\"fa-light fa-xmark\"></i>\n        </button>\n      </div>\n    }\n\n    <div class=\"axm-comment__editor\">\n      <ax-text-editor\n        #editorRef\n        outputFormat=\"html\"\n        [look]=\"editorOptions().look\"\n        [(ngModel)]=\"commentContent\"\n      >\n        <ax-text-editor-content class=\"min-h-24\"></ax-text-editor-content>\n        <ax-text-editor-toolbar>\n          <ax-prefix>\n            <ax-text-editor-history></ax-text-editor-history>\n            <ax-text-editor-font-style></ax-text-editor-font-style>\n            <ax-text-editor-colors></ax-text-editor-colors>\n            <ax-text-editor-list></ax-text-editor-list>\n            <ax-text-editor-alignment></ax-text-editor-alignment>\n          </ax-prefix>\n        </ax-text-editor-toolbar>\n      </ax-text-editor>\n      <!-- ----- Send sits under the editor, aligned to the inline end ----- -->\n      <div class=\"axm-comment__editor-actions\">\n        <ax-button\n          look=\"solid\"\n          color=\"primary\"\n          class=\"ax-sm\"\n          [disabled]=\"hasCooldown() || !commentContent()\"\n          (click)=\"submitComment()\"\n          [text]=\"\n            '@conversation:comments.actions.send.title' | translate | async\n          \"\n        >\n          @if (isSubmitting()) {\n            <ax-loading></ax-loading>\n          }\n        </ax-button>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: ["@layer properties;:host{display:block;height:100%;min-height:0px;width:100%}.axm-comment{min-height:0px;height:calc(100vh - 210px);background-color:rgb(var(--ax-sys-color-lightest-surface))}.axm-comment .axm-comment__list{min-height:0px}.axm-comment .axm-comment__skeleton{display:flex;align-items:flex-start;gap:.875rem;padding:1.25rem 1.25rem 1.5rem}.axm-comment .axm-comment__skeleton-body{display:flex;min-width:0px;flex:1;flex-direction:column;gap:calc(var(--spacing, .25rem) * 2)}.axm-comment .axm-comment__composer{flex-shrink:0;background-color:rgb(var(--ax-sys-color-surface-surface))}.axm-comment .axm-comment__context{display:flex;align-items:center;justify-content:space-between;gap:calc(var(--spacing, .25rem) * 3);padding:.625rem .75rem;border:1px solid rgb(var(--ax-sys-color-border-light-surface));border-bottom:none;border-inline-start:3px solid rgb(var(--ax-sys-color-primary-surface));background-color:rgba(var(--ax-sys-color-primary-lightest-surface),.35);font-size:.8125rem;line-height:1.4}.axm-comment .axm-comment__context-main{display:flex;min-width:0px;flex:1;cursor:pointer;align-items:center;gap:.625rem}.axm-comment .axm-comment__context-icon{flex-shrink:0;font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));color:rgb(var(--ax-sys-color-primary-surface))}.axm-comment .axm-comment__context-copy{display:flex;min-width:0px;flex-direction:column;gap:.125rem}.axm-comment .axm-comment__context-label{margin:0;--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);color:rgb(var(--ax-sys-color-primary-surface))}.axm-comment .axm-comment__context-preview{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:start;color:rgb(var(--ax-sys-color-neutral-600-surface, 107 114 128))}.axm-comment .axm-comment__context-close{flex-shrink:0;cursor:pointer;border-radius:var(--radius-md, .375rem);--tw-border-style: none;border-style:none;padding:.25rem;background:transparent;color:rgb(var(--ax-sys-color-neutral-500-surface, 107 114 128));font-size:1rem;line-height:1}.axm-comment .axm-comment__context-close:hover{background-color:rgba(var(--ax-sys-color-neutral-100-surface, 243 244 246),.8)}.axm-comment .axm-comment__editor{overflow:hidden;border:1px solid rgb(var(--ax-sys-color-border-light-surface));background-color:rgb(var(--ax-sys-color-lightest-surface));box-shadow:0 1px 2px #0f172a0a}.axm-comment .axm-comment__editor-actions{display:flex;justify-content:flex-end;padding:.5rem .75rem;border-top:1px solid rgb(var(--ax-sys-color-border-light-surface))}.axm-comment .axm-comment__author{font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600)}.axm-comment .axm-comment__date{font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));color:rgb(var(--ax-sys-color-neutral-500-surface, 107 114 128))}.axm-comment .axm-comment__menu-btn{opacity:0;transition:opacity .15s ease}ax-comment-item{border-radius:.75rem;transition:background-color .2s ease}ax-comment-item:hover{background-color:rgba(var(--ax-sys-color-neutral-100-surface, 243 244 246),.45)}ax-comment-item:hover .axm-comment__menu-btn{opacity:1}ax-comment-item.highlighted{animation:axm-comment-highlight 2.5s cubic-bezier(.4,0,.2,1) forwards}ax-text-editor{flex-shrink:0}ax-text-editor .ax-editor-container{border:none!important;border-radius:0!important;box-shadow:none!important}ax-text-editor .ax-error-message{padding-inline-start:.75rem}@keyframes axm-comment-highlight{0%{background-color:transparent;box-shadow:inset 3px 0 0 0 transparent}10%{background-color:rgba(var(--ax-sys-color-primary-lightest-surface),.5);box-shadow:inset 3px 0 rgb(var(--ax-sys-color-primary-surface))}35%{background-color:rgba(var(--ax-sys-color-primary-lightest-surface),.3);box-shadow:inset 3px 0 rgba(var(--ax-sys-color-primary-lighter-surface),.8)}60%{background-color:rgba(var(--ax-sys-color-primary-lightest-surface),.4);box-shadow:inset 3px 0 rgba(var(--ax-sys-color-primary-lightest-surface),.6)}to{background-color:transparent;box-shadow:inset 3px 0 0 0 transparent}}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-font-weight: initial}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: AXTextEditorModule }, { kind: "component", type: i1$3.AXTextEditorComponent, selector: "ax-text-editor", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name", "look", "placeHolder", "outputFormat", "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.AXTextEditorContentComponent, selector: "ax-text-editor-content" }, { kind: "component", type: i1$3.AXTextEditorHistoryComponent, selector: "ax-text-editor-history" }, { kind: "component", type: i1$3.AXTextEditorFontStyleComponent, selector: "ax-text-editor-font-style" }, { kind: "component", type: i1$3.AXTextEditorAlignmentComponent, selector: "ax-text-editor-alignment" }, { kind: "component", type: i1$3.AXTextEditorColorsComponent, selector: "ax-text-editor-colors" }, { kind: "component", type: i1$3.AXTextEditorListComponent, selector: "ax-text-editor-list" }, { kind: "ngmodule", type: AXSkeletonModule }, { kind: "component", type: i2$1.AXSkeletonComponent, selector: "ax-skeleton", inputs: ["animated"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXCommentModule }, { kind: "component", type: i4.AXCommentViewComponent, selector: "ax-comment-view", inputs: ["datasource", "itemTemplate"], outputs: ["datasourceChange", "onReply", "onLikeChange", "onRepliesToggle", "onAction"] }, { kind: "component", type: i4.AXCommentContainerComponent, selector: "ax-comment-container" }, { kind: "component", type: i4.AXCommentItemComponent, selector: "ax-comment-item", inputs: ["item", "replyCount", "repliesExpanded", "loading", "itemTemplate", "itemContext"], outputs: ["repliesExpandedChange", "likeChange", "replyClick", "actionClick"] }, { kind: "component", type: i4.AXCommentLikeComponent, selector: "ax-comment-like", inputs: ["like"], outputs: ["likeChange"] }, { kind: "component", type: i4.AXMenuOptionsComponent, selector: "ax-comment-menu-options" }, { kind: "component", type: i4.AXCommentReplyTextComponent, selector: "ax-comment-reply-text" }, { kind: "component", type: i4.AXCommentDateComponent, selector: "ax-comment-date" }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1$1.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "component", type: i1$1.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: i1$1.AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items", "closeParentOnClick", "lockOnLoading"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: AXAvatarModule }, { kind: "ngmodule", type: AXImageModule }, { kind: "ngmodule", type: AXLoadingModule }, { kind: "component", type: i6.AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "context"], outputs: ["visibleChange"] }, { kind: "ngmodule", type: AXDropdownModule }, { kind: "component", type: i7.AXDropdownPanelComponent, selector: "ax-dropdown-panel", inputs: ["isOpen", "fitParent", "dropdownWidth", "position", "placement", "_target", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "ngmodule", type: AXFormatModule }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "ngmodule", type: AXFormModule }, { kind: "ngmodule", type: AXToolBarModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXDropdownButtonModule }, { kind: "component", type: AXPUserAvatarComponent, selector: "axp-user-avatar", inputs: ["size", "userId", "showPresence", "displayName", "displayAvatar"] }, { kind: "directive", type: AXPUserCardDirective, selector: "[axpUserCard]", inputs: ["axpUserCard", "axpUserCardDisabled", "axpUserCardTrigger"] }, { kind: "component", type: AXPStateMessageComponent, selector: "axp-state-message", inputs: ["mode", "icon", "title", "description", "titleParams", "descriptionParams", "look"] }, { kind: "pipe", type: i5.AXFormatPipe, name: "format" }, { kind: "pipe", type: i1$2.AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], animations: [
-            trigger('fadeIn', [
-                transition(':enter', [
-                    style({ opacity: 0, transform: 'translateY(10px)' }),
-                    animate('300ms ease-out', style({ opacity: 1, transform: 'translateY(0)' })),
-                ]),
-            ]),
-        ], 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%}.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,
-            args: [{ selector: 'axm-comment', encapsulation: ViewEncapsulation.None, animations: [
-                        trigger('fadeIn', [
-                            transition(':enter', [
-                                style({ opacity: 0, transform: 'translateY(10px)' }),
-                                animate('300ms ease-out', style({ opacity: 1, transform: 'translateY(0)' })),
-                            ]),
-                        ]),
-                    ], imports: [
+            args: [{ selector: 'axm-comment', encapsulation: ViewEncapsulation.None, imports: [
                         AXTextEditorModule,
                         AXSkeletonModule,
                         AXDecoratorModule,
                         AXCommentModule,
+                        AXBadgeModule,
                         AXButtonModule,
-                        AXAvatarModule,
-                        AXImageModule,
+                        AXDropdownButtonModule,
                         AXLoadingModule,
-                        AXDropdownModule,
-                        AXFormatModule,
                         AXTranslationModule,
                         AsyncPipe,
-                        AXFormModule,
-                        AXToolBarModule,
                         FormsModule,
-                        AXDropdownButtonModule,
+                        AXPStateMessageComponent,
                         AXPUserAvatarComponent,
                         AXPUserCardDirective,
-                        AXPStateMessageComponent,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"axm-comment size-full flex flex-col overflow-hidden\">\n  <div class=\"axm-comment__list flex-1 min-h-0 overflow-y-auto\">\n    <ax-comment-container>\n      @if (isLoading()) {\n        <div class=\"axm-comment__skeleton\">\n          <ax-skeleton class=\"size-10 shrink-0 rounded-full\"></ax-skeleton>\n          <div class=\"axm-comment__skeleton-body\">\n            <ax-skeleton class=\"h-4 w-32 rounded\"></ax-skeleton>\n            <ax-skeleton class=\"h-3 w-full rounded-full\"></ax-skeleton>\n            <ax-skeleton class=\"h-3 w-11/12 rounded-full\"></ax-skeleton>\n            <ax-skeleton class=\"h-3 w-4/5 rounded-full\"></ax-skeleton>\n          </div>\n        </div>\n      } @else if (comments().length > 0) {\n        <ax-comment-view class=\"axm-comment__view\">\n          @for (comment of comments(); track comment.id) {\n            <ax-comment-item\n              [id]=\"comment.id!\"\n              [replyCount]=\"comment.replyCount\"\n              [repliesExpanded]=\"isRepliesExpanded(comment.id!)\"\n              (repliesExpandedChange)=\"\n                onRepliesExpandedChange(comment.id!, $event)\n              \"\n              [class.highlighted]=\"highlightedCommentId() === comment.id\"\n              [@fadeIn]\n            >\n              <axp-user-avatar\n                #user\n                [size]=\"36\"\n                [userId]=\"comment.senderId\"\n                [axpUserCard]=\"comment.senderId\"\n                ngProjectAs=\"'ax-avatar'\"\n              ></axp-user-avatar>\n              <ax-title class=\"axm-comment__author\" [axpUserCard]=\"comment.senderId\">{{\n                user.title()\n              }}</ax-title>\n              <ax-comment-date class=\"axm-comment__date\">\n                {{ comment.timestamp | format: 'timeleft' | async }}\n              </ax-comment-date>\n              <ax-comment-menu-options>\n                <ax-button\n                  class=\"axm-comment__menu-btn ax-sm\"\n                  look=\"blank\"\n                  color=\"neutral\"\n                >\n                  <ax-icon icon=\"fa-regular fa-ellipsis\"></ax-icon>\n                </ax-button>\n                <ax-dropdown-panel>\n                  <ax-button-item-list>\n                    <ax-button-item\n                      [text]=\"\n                        ('@conversation:comments.actions.edit.title'\n                          | translate\n                          | async) ?? ''\n                      \"\n                      color=\"neutral\"\n                      (click)=\"editMessage(comment, undefined, user.title())\"\n                    >\n                      <ax-prefix>\n                        <ax-icon icon=\"fa-light fa-pen\"></ax-icon>\n                      </ax-prefix>\n                    </ax-button-item>\n                    <ax-button-item\n                      [text]=\"\n                        ('@conversation:comments.actions.delete.title'\n                          | translate\n                          | async) ?? ''\n                      \"\n                      color=\"danger\"\n                      (click)=\"deleteComment(comment.id!)\"\n                    >\n                      <ax-prefix>\n                        <ax-icon icon=\"fa-light fa-trash-can\"></ax-icon>\n                      </ax-prefix>\n                    </ax-button-item>\n                  </ax-button-item-list>\n                </ax-dropdown-panel>\n              </ax-comment-menu-options>\n              <ax-content\n                [innerHTML]=\"sanitizeHtml(getCommentText(comment))\"\n              ></ax-content>\n              <ax-comment-like\n                (click)=\"toggleLike(comment)\"\n                [like]=\"isLikedByUser(comment)\"\n              >\n                {{ getReactionsCount(comment) }}\n              </ax-comment-like>\n              <ax-comment-reply-text\n                (click)=\"replyMessage(comment, undefined, user.title())\"\n              ></ax-comment-reply-text>\n\n              @for (reply of comment.replies; track reply.id) {\n                <ax-comment-item\n                  [id]=\"reply.id\"\n                  [class.highlighted]=\"highlightedCommentId() === reply.id\"\n                  [@fadeIn]\n                >\n                  <axp-user-avatar\n                    #replyUser\n                    [size]=\"36\"\n                    [userId]=\"reply.senderId\"\n                    [axpUserCard]=\"reply.senderId\"\n                    ngProjectAs=\"'ax-avatar'\"\n                  ></axp-user-avatar>\n                  <ax-title class=\"axm-comment__author\" [axpUserCard]=\"reply.senderId\">{{\n                    replyUser.title()\n                  }}</ax-title>\n                  <ax-comment-date class=\"axm-comment__date\">\n                    {{ reply.timestamp | format: 'timeleft' | async }}\n                  </ax-comment-date>\n                  <ax-comment-menu-options>\n                    <ax-button\n                      class=\"axm-comment__menu-btn ax-sm\"\n                      look=\"blank\"\n                      color=\"neutral\"\n                    >\n                      <ax-icon icon=\"fa-regular fa-ellipsis\"></ax-icon>\n                    </ax-button>\n                    <ax-dropdown-panel>\n                      <ax-button-item-list>\n                        <ax-button-item\n                          [text]=\"\n                            ('@conversation:comments.actions.edit.title'\n                              | translate\n                              | async) ?? ''\n                          \"\n                          color=\"neutral\"\n                          (click)=\"\n                            editMessage(comment, reply, replyUser.title())\n                          \"\n                        >\n                          <ax-prefix>\n                            <ax-icon icon=\"fa-light fa-pen\"></ax-icon>\n                          </ax-prefix>\n                        </ax-button-item>\n                        <ax-button-item\n                          [text]=\"\n                            ('@conversation:comments.actions.delete.title'\n                              | translate\n                              | async) ?? ''\n                          \"\n                          color=\"danger\"\n                          (click)=\"deleteComment(reply.id!)\"\n                        >\n                          <ax-prefix>\n                            <ax-icon icon=\"fa-light fa-trash-can\"></ax-icon>\n                          </ax-prefix>\n                        </ax-button-item>\n                      </ax-button-item-list>\n                    </ax-dropdown-panel>\n                  </ax-comment-menu-options>\n                  <ax-content\n                    [innerHTML]=\"sanitizeHtml(getCommentText(reply))\"\n                  ></ax-content>\n                  <ax-comment-like\n                    (click)=\"toggleLike(reply)\"\n                    [like]=\"isLikedByUser(reply)\"\n                  >\n                    {{ getReactionsCount(reply) }}\n                  </ax-comment-like>\n                  <ax-comment-reply-text\n                    (click)=\"replyMessage(comment, reply, replyUser.title())\"\n                  ></ax-comment-reply-text>\n                </ax-comment-item>\n              }\n            </ax-comment-item>\n          }\n        </ax-comment-view>\n      }\n      <!-- ----- Empty state when no comments exist ----- -->\n      @else {\n        <axp-state-message\n          icon=\"fa-light fa-comments\"\n          [title]=\"\n            '@conversation:comments.components.comment.empty-states.no-comments.title'\n          \"\n          [description]=\"\n            '@conversation:comments.components.comment.empty-states.no-comments.description'\n          \"\n        >\n        </axp-state-message>\n      }\n    </ax-comment-container>\n  </div>\n\n  <div class=\"axm-comment__composer\">\n    @if (isReplyingMode() || isEditingMode()) {\n      <div class=\"axm-comment__context\">\n        <button\n          type=\"button\"\n          class=\"axm-comment__context-main\"\n          (click)=\"scrollMain()\"\n        >\n          <i\n            class=\"fa-light axm-comment__context-icon\"\n            [class.fa-reply]=\"isReplyingMode()\"\n            [class.fa-pen]=\"isEditingMode()\"\n          ></i>\n          <div class=\"axm-comment__context-copy\">\n            <p class=\"axm-comment__context-label\">\n              @if (isReplyingMode()) {\n                {{\n                  '@conversation:comments.actions.reply-to' | translate | async\n                }}\n                <span>{{ activeReplyComment()?.userName }}</span>\n              } @else {\n                {{\n                  '@conversation:comments.actions.edit-message'\n                    | translate\n                    | async\n                }}\n              }\n            </p>\n            <div\n              class=\"axm-comment__context-preview\"\n              [innerHTML]=\"\n                isReplyingMode()\n                  ? sanitizeHtml(getCommentText(activeReplyComment()!))\n                  : sanitizeHtml(getCommentText(activeEditComment()!))\n              \"\n            ></div>\n          </div>\n        </button>\n        <button\n          type=\"button\"\n          class=\"axm-comment__context-close\"\n          (click)=\"resetReplyEditState()\"\n          [attr.aria-label]=\"\n            ('@conversation:comments.actions.cancel.title'\n              | translate\n              | async) ?? 'Cancel'\n          \"\n        >\n          <i class=\"fa-light fa-xmark\"></i>\n        </button>\n      </div>\n    }\n\n    <div class=\"axm-comment__editor\">\n      <ax-text-editor\n        #editorRef\n        outputFormat=\"html\"\n        [look]=\"editorOptions().look\"\n        [(ngModel)]=\"commentContent\"\n      >\n        <ax-text-editor-content class=\"min-h-24\"></ax-text-editor-content>\n        <ax-text-editor-toolbar>\n          <ax-prefix>\n            <ax-text-editor-history></ax-text-editor-history>\n            <ax-text-editor-font-style></ax-text-editor-font-style>\n            <ax-text-editor-colors></ax-text-editor-colors>\n            <ax-text-editor-list></ax-text-editor-list>\n            <ax-text-editor-alignment></ax-text-editor-alignment>\n          </ax-prefix>\n        </ax-text-editor-toolbar>\n      </ax-text-editor>\n      <!-- ----- Send sits under the editor, aligned to the inline end ----- -->\n      <div class=\"axm-comment__editor-actions\">\n        <ax-button\n          look=\"solid\"\n          color=\"primary\"\n          class=\"ax-sm\"\n          [disabled]=\"hasCooldown() || !commentContent()\"\n          (click)=\"submitComment()\"\n          [text]=\"\n            '@conversation:comments.actions.send.title' | translate | async\n          \"\n        >\n          @if (isSubmitting()) {\n            <ax-loading></ax-loading>\n          }\n        </ax-button>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: ["@layer properties;:host{display:block;height:100%;min-height:0px;width:100%}.axm-comment{min-height:0px;height:calc(100vh - 210px);background-color:rgb(var(--ax-sys-color-lightest-surface))}.axm-comment .axm-comment__list{min-height:0px}.axm-comment .axm-comment__skeleton{display:flex;align-items:flex-start;gap:.875rem;padding:1.25rem 1.25rem 1.5rem}.axm-comment .axm-comment__skeleton-body{display:flex;min-width:0px;flex:1;flex-direction:column;gap:calc(var(--spacing, .25rem) * 2)}.axm-comment .axm-comment__composer{flex-shrink:0;background-color:rgb(var(--ax-sys-color-surface-surface))}.axm-comment .axm-comment__context{display:flex;align-items:center;justify-content:space-between;gap:calc(var(--spacing, .25rem) * 3);padding:.625rem .75rem;border:1px solid rgb(var(--ax-sys-color-border-light-surface));border-bottom:none;border-inline-start:3px solid rgb(var(--ax-sys-color-primary-surface));background-color:rgba(var(--ax-sys-color-primary-lightest-surface),.35);font-size:.8125rem;line-height:1.4}.axm-comment .axm-comment__context-main{display:flex;min-width:0px;flex:1;cursor:pointer;align-items:center;gap:.625rem}.axm-comment .axm-comment__context-icon{flex-shrink:0;font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));color:rgb(var(--ax-sys-color-primary-surface))}.axm-comment .axm-comment__context-copy{display:flex;min-width:0px;flex-direction:column;gap:.125rem}.axm-comment .axm-comment__context-label{margin:0;--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);color:rgb(var(--ax-sys-color-primary-surface))}.axm-comment .axm-comment__context-preview{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:start;color:rgb(var(--ax-sys-color-neutral-600-surface, 107 114 128))}.axm-comment .axm-comment__context-close{flex-shrink:0;cursor:pointer;border-radius:var(--radius-md, .375rem);--tw-border-style: none;border-style:none;padding:.25rem;background:transparent;color:rgb(var(--ax-sys-color-neutral-500-surface, 107 114 128));font-size:1rem;line-height:1}.axm-comment .axm-comment__context-close:hover{background-color:rgba(var(--ax-sys-color-neutral-100-surface, 243 244 246),.8)}.axm-comment .axm-comment__editor{overflow:hidden;border:1px solid rgb(var(--ax-sys-color-border-light-surface));background-color:rgb(var(--ax-sys-color-lightest-surface));box-shadow:0 1px 2px #0f172a0a}.axm-comment .axm-comment__editor-actions{display:flex;justify-content:flex-end;padding:.5rem .75rem;border-top:1px solid rgb(var(--ax-sys-color-border-light-surface))}.axm-comment .axm-comment__author{font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600)}.axm-comment .axm-comment__date{font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));color:rgb(var(--ax-sys-color-neutral-500-surface, 107 114 128))}.axm-comment .axm-comment__menu-btn{opacity:0;transition:opacity .15s ease}ax-comment-item{border-radius:.75rem;transition:background-color .2s ease}ax-comment-item:hover{background-color:rgba(var(--ax-sys-color-neutral-100-surface, 243 244 246),.45)}ax-comment-item:hover .axm-comment__menu-btn{opacity:1}ax-comment-item.highlighted{animation:axm-comment-highlight 2.5s cubic-bezier(.4,0,.2,1) forwards}ax-text-editor{flex-shrink:0}ax-text-editor .ax-editor-container{border:none!important;border-radius:0!important;box-shadow:none!important}ax-text-editor .ax-error-message{padding-inline-start:.75rem}@keyframes axm-comment-highlight{0%{background-color:transparent;box-shadow:inset 3px 0 0 0 transparent}10%{background-color:rgba(var(--ax-sys-color-primary-lightest-surface),.5);box-shadow:inset 3px 0 rgb(var(--ax-sys-color-primary-surface))}35%{background-color:rgba(var(--ax-sys-color-primary-lightest-surface),.3);box-shadow:inset 3px 0 rgba(var(--ax-sys-color-primary-lighter-surface),.8)}60%{background-color:rgba(var(--ax-sys-color-primary-lightest-surface),.4);box-shadow:inset 3px 0 rgba(var(--ax-sys-color-primary-lightest-surface),.6)}to{background-color:transparent;box-shadow:inset 3px 0 0 0 transparent}}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-font-weight: initial}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"] }]
-        }], propDecorators: { refrenceType: [{ type: i0.Input, args: [{ isSignal: true, alias: "refrenceType", required: true }] }], refrenceId: [{ type: i0.Input, args: [{ isSignal: true, alias: "refrenceId", required: true }] }], subject: [{ type: i0.Input, args: [{ isSignal: true, alias: "subject", required: true }] }], editorRef: [{ type: i0.ViewChild, args: ['editorRef', { isSignal: true }] }] } });
+                    ], 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"] }]
+        }], 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 -----
+function stripHtmlToPlainText(html) {
+    return html
+        .replace(/<[^>]+>/g, '')
+        .replace(/&nbsp;/gi, ' ')
+        .trim();
+}
+function toInitials(name) {
+    const parts = name.trim().split(/\s+/).filter(Boolean);
+    if (parts.length === 0) {
+        return '?';
+    }
+    if (parts.length === 1) {
+        return parts[0].slice(0, 1).toUpperCase();
+    }
+    return (parts[0].slice(0, 1) + parts[1].slice(0, 1)).toUpperCase();
+}
+function colorForUser(userId) {
+    let hash = 0;
+    for (let i = 0; i < userId.length; i++) {
+        hash = (hash + userId.charCodeAt(i)) % AVATAR_COLORS.length;
+    }
+    return AVATAR_COLORS[hash];
+}
+function insertReply(list, parentId, comment) {
+    return list.map((c) => {
+        if (c.id === parentId) {
+            const newReplies = c.replies ? [...c.replies, comment] : [comment];
+            return { ...c, replies: newReplies, replyCount: newReplies.length };
+        }
+        if (c.replies?.length) {
+            return { ...c, replies: insertReply(c.replies, parentId, comment) };
+        }
+        return c;
+    });
+}
+function resolveDisplayName(info) {
+    if (!info) {
+        return '';
+    }
+    const parts = [info.firstName, info.lastName].map((part) => part?.trim()).filter(Boolean);
+    if (parts.length > 0) {
+        return parts.join(' ');
+    }
+    return info.username?.trim() || '';
+}
 
 var comment_component = /*#__PURE__*/Object.freeze({
     __proto__: null,
@@ -14190,7 +14293,7 @@ class AXMChatVoiceRecorderComponent {
         this.discardActiveRecorder();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXMChatVoiceRecorderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXMChatVoiceRecorderComponent, isStandalone: true, selector: "axm-chat-voice-recorder", inputs: { conversation: { classPropertyName: "conversation", publicName: "conversation", isSignal: true, isRequired: true, transformFunction: null }, service: { classPropertyName: "service", publicName: "service", isSignal: true, isRequired: false, transformFunction: null }, initialFiles: { classPropertyName: "initialFiles", publicName: "initialFiles", isSignal: true, isRequired: false, transformFunction: null }, autoRun: { classPropertyName: "autoRun", publicName: "autoRun", isSignal: true, isRequired: false, transformFunction: null }, __popup__: { classPropertyName: "__popup__", publicName: "__popup__", isSignal: true, isRequired: false, transformFunction: null }, __actionSheet__: { classPropertyName: "__actionSheet__", publicName: "__actionSheet__", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { recordingComplete: "recordingComplete", recordingCancelled: "recordingCancelled" }, viewQueries: [{ propertyName: "waveWrapRef", first: true, predicate: ["waveWrap"], descendants: true, isSignal: true }, { propertyName: "waveRef", first: true, predicate: AXAudioWaveComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"voice-recorder\" [class.voice-recorder--preview]=\"isPreview()\" role=\"dialog\" aria-modal=\"true\" [attr.aria-label]=\"translation.translateSync('@conversation:chat.voice-recorder.title')\">\n  @if (isUploading()) {\n    <!-- ----- Upload progress while the voice file is sent ----- -->\n    <div class=\"voice-recorder__upload\">\n      <span class=\"voice-recorder__upload-label\">{{ getUploadingLabel() }}</span>\n      <ax-progress-bar [progress]=\"uploadProgress()\" [mode]=\"'determinate'\" [height]=\"6\" />\n    </div>\n  }\n  <!-- ----- Speech-to-text overlay while the recording is transcribed ----- -->\n  @else if (isTranscribing()) {\n    <div class=\"voice-recorder__upload\">\n      <ax-loading></ax-loading>\n      <span class=\"voice-recorder__upload-label\">{{ '@conversation:chat.voice-recorder.transcribing' | translate | async }}</span>\n    </div>\n  }\n  <!-- ----- Idle microphone before recording starts ----- -->\n  @else if (!isRecording() && !isPreview()) {\n    <div class=\"voice-recorder__idle\">\n      <button type=\"button\" class=\"voice-recorder__mic\" [attr.aria-label]=\"translation.translateSync('@conversation:chat.voice-recorder.tap-to-start')\" (click)=\"startRecording()\">\n        <i class=\"fa-light fa-microphone\" aria-hidden=\"true\"></i>\n      </button>\n      <span class=\"voice-recorder__hint\">{{ '@conversation:chat.voice-recorder.tap-to-start' | translate | async }}</span>\n    </div>\n  }\n  <!-- ----- Live waveform or paused preview with send actions ----- -->\n  @else {\n    <div class=\"voice-recorder__body\">\n      <div class=\"voice-recorder__visual\">\n        <div class=\"voice-recorder__wave-wrap\" #waveWrap>\n          <!-- ----- Live bars while the microphone is capturing ----- -->\n          @if (isRecording()) {\n            <div class=\"voice-recorder__live-wave\" aria-hidden=\"true\">\n              @for (bar of liveDisplayBars(); track bar.index) {\n                <span class=\"voice-recorder__bar\" [class.voice-recorder__bar--recorded]=\"bar.recorded\" [style.height.px]=\"bar.height\"></span>\n              }\n            </div>\n          }\n          <!-- ----- Preview waveform after recording is paused ----- -->\n          @else if (waveConfig(); as config) {\n            <ax-audio-wave class=\"voice-recorder__audio-wave\" [config]=\"config\" (onStatusChanged)=\"onWaveStatusChanged($event)\" />\n          }\n        </div>\n        <!-- ----- Play or pause the recorded preview ----- -->\n        @if (isPreview()) {\n          <ax-button\n            class=\"voice-recorder__play rounded-full\"\n            look=\"twotone\"\n            [iconOnly]=\"true\"\n            [text]=\"isPlayingPreview() ? translation.translateSync('@conversation:chat.media.pause') : translation.translateSync('@conversation:chat.media.play')\"\n            (onClick)=\"togglePreview()\"\n          >\n            <ax-icon>\n              <i class=\"fa-solid\" [class.fa-pause]=\"isPlayingPreview()\" [class.fa-play]=\"!isPlayingPreview()\"></i>\n            </ax-icon>\n          </ax-button>\n        }\n      </div>\n\n      <div class=\"voice-recorder__time\" aria-live=\"polite\">\n        {{ formattedTime() }}\n        <span class=\"sr-only\">{{ '@conversation:chat.voice-recorder.recording' | translate | async }}</span>\n      </div>\n    </div>\n\n    <footer class=\"voice-recorder__footer\">\n      <div class=\"voice-recorder__footer-start\">\n        <!-- ----- Delete the current recording ----- -->\n        @if (isPreview()) {\n          <ax-button class=\"voice-recorder__delete\" look=\"blank\" color=\"danger\" [iconOnly]=\"true\" [text]=\"translation.translateSync('@acorex:chat.actions.delete')\" (onClick)=\"deleteRecording()\">\n            <ax-icon><i class=\"fa-light fa-trash-can\"></i></ax-icon>\n          </ax-button>\n        }\n        <!-- ----- Pause recording or continue from preview ----- -->\n        @if (isRecording() || isPreview()) {\n          <ax-button\n            class=\"voice-recorder__stop\"\n            look=\"blank\"\n            [iconOnly]=\"true\"\n            [text]=\"isPreview() ? translation.translateSync('@conversation:chat.voice-recorder.continue-recording') : translation.translateSync('@conversation:chat.voice-recorder.stop-recording')\"\n            (onClick)=\"toggleStopOrContinue()\"\n          >\n            <ax-icon>\n              <i class=\"fa-solid\" [class.fa-pause]=\"isRecording()\" [class.fa-microphone]=\"isPreview()\"></i>\n            </ax-icon>\n          </ax-button>\n        }\n      </div>\n\n      <div class=\"voice-recorder__footer-end\">\n        <!-- ----- Convert the paused recording into composer text ----- -->\n        @if (isPreview()) {\n          <ax-button class=\"voice-recorder__transcribe\" look=\"outline\" color=\"secondary\" [text]=\"translation.translateSync('@conversation:chat.voice-recorder.transcribe')\" [disabled]=\"!canTranscribe()\" (onClick)=\"applySpeechToText()\">\n            <ax-prefix>\n              <ax-icon><i class=\"fa-light fa-waveform-lines\"></i></ax-icon>\n            </ax-prefix>\n          </ax-button>\n        }\n        <ax-button class=\"voice-recorder__send\" look=\"solid\" color=\"primary\" [text]=\"translation.translateSync('@acorex:chat.actions.send')\" [disabled]=\"!canSend()\" (onClick)=\"sendRecording()\">\n          <ax-prefix>\n            <ax-icon><i class=\"fa-light fa-paper-plane-top\"></i></ax-icon>\n          </ax-prefix>\n        </ax-button>\n      </div>\n    </footer>\n  }\n</div>\n", styles: ["@layer properties;@layer components{axm-chat-voice-recorder{display:flex;width:100%;flex-direction:column;container-type:inline-size}axm-chat-voice-recorder .voice-recorder{display:flex;width:100%;flex-direction:column;background-color:rgba(var(--ax-sys-color-lightest-surface));padding-inline:calc(var(--spacing, .25rem) * 5);padding-top:calc(var(--spacing, .25rem) * 5);padding-bottom:calc(var(--spacing, .25rem) * 5)}axm-chat-voice-recorder .voice-recorder__idle,axm-chat-voice-recorder .voice-recorder__upload{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 6);text-align:center}axm-chat-voice-recorder .voice-recorder__mic{display:flex;height:calc(var(--spacing, .25rem) * 16);width:calc(var(--spacing, .25rem) * 16);cursor:pointer;align-items:center;justify-content:center;border-radius:calc(infinity * 1px);--tw-border-style: none;border-style:none;padding:0;font-size:var(--text-2xl, 1.5rem);line-height:var(--tw-leading, var(--text-2xl--line-height, calc(2 / 1.5)));color:rgb(var(--ax-sys-color-on-primary-500));background:rgb(var(--ax-sys-color-primary-500));box-shadow:0 .5rem 1.25rem rgba(var(--ax-sys-color-primary-500),.28)}axm-chat-voice-recorder .voice-recorder__mic:hover,axm-chat-voice-recorder .voice-recorder__mic:focus-visible{--tw-outline-style: none;outline-style:none;background:rgb(var(--ax-sys-color-primary-600))}axm-chat-voice-recorder .voice-recorder__hint,axm-chat-voice-recorder .voice-recorder__upload-label{margin:0;font-size:.8125rem;--tw-leading: var(--leading-snug, 1.375);line-height:var(--leading-snug, 1.375);color:rgba(var(--ax-sys-color-on-surface),.62)}axm-chat-voice-recorder .voice-recorder__upload{width:100%;max-width:calc(var(--spacing, .25rem) * 72);gap:calc(var(--spacing, .25rem) * 2.5)}axm-chat-voice-recorder .voice-recorder__body{display:flex;width:100%;flex-direction:column;align-items:center}axm-chat-voice-recorder .voice-recorder__visual{display:flex;width:100%;min-width:0px;align-items:center;gap:calc(var(--spacing, .25rem) * 3)}axm-chat-voice-recorder .voice-recorder__wave-wrap{position:relative;display:flex;min-height:calc(var(--spacing, .25rem) * 14);min-width:0px;flex:1;align-items:center}axm-chat-voice-recorder .voice-recorder--preview .voice-recorder__wave-wrap{border-radius:var(--radius-xl, .75rem);padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:calc(var(--spacing, .25rem) * 2);background:rgba(var(--ax-sys-color-primary-500),.08)}axm-chat-voice-recorder .voice-recorder__live-wave{display:flex;height:calc(var(--spacing, .25rem) * 9);width:100%;min-width:0px;align-items:center;gap:2px}axm-chat-voice-recorder .voice-recorder__bar{display:block;flex:1 1 0;min-width:0;border-radius:2px;background:rgba(var(--ax-sys-color-on-surface),.16);transform-origin:center}axm-chat-voice-recorder .voice-recorder__bar--recorded{background:rgb(var(--ax-sys-color-primary-500))}axm-chat-voice-recorder .voice-recorder__audio-wave{display:block;min-height:calc(var(--spacing, .25rem) * 9);width:100%;min-width:0px;flex:1}axm-chat-voice-recorder .voice-recorder__audio-wave .ax-audio-wave,axm-chat-voice-recorder .voice-recorder__audio-wave .ax-audio-wave-host{display:block;width:100%}axm-chat-voice-recorder .voice-recorder__play{position:relative;z-index:1;flex-shrink:0}axm-chat-voice-recorder .voice-recorder__play .fa-play{padding-inline-start:.12rem;font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)))}axm-chat-voice-recorder .voice-recorder__play .fa-pause{font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)))}axm-chat-voice-recorder .voice-recorder__time{margin-top:calc(var(--spacing, .25rem) * 4);font-size:1.25rem;--tw-leading: 1;line-height:1;--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);color:rgba(var(--ax-sys-color-on-surface));--tw-numeric-spacing: tabular-nums;font-variant-numeric:var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,)}axm-chat-voice-recorder .voice-recorder__footer{margin-top:calc(var(--spacing, .25rem) * 6);display:flex;align-items:center;justify-content:space-between;gap:calc(var(--spacing, .25rem) * 3)}axm-chat-voice-recorder .voice-recorder__footer:dir(rtl){flex-direction:row-reverse}axm-chat-voice-recorder .voice-recorder__footer-start,axm-chat-voice-recorder .voice-recorder__footer-end{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 3)}axm-chat-voice-recorder .voice-recorder__footer-end,axm-chat-voice-recorder .voice-recorder__transcribe,axm-chat-voice-recorder .voice-recorder__send{min-width:0px}axm-chat-voice-recorder .voice-recorder__transcribe>button,axm-chat-voice-recorder .voice-recorder__send>button{display:flex;height:calc(var(--spacing, .25rem) * 12);align-items:center;justify-content:center;gap:calc(var(--spacing, .25rem) * 2);border-radius:var(--radius-xl, .75rem);padding-inline:calc(var(--spacing, .25rem) * 3);font-size:.9375rem;--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);box-shadow:none;background-image:none}axm-chat-voice-recorder .voice-recorder__send .fa-paper-plane-top:dir(rtl){transform:scaleX(-1)}axm-chat-voice-recorder .voice-recorder__delete,axm-chat-voice-recorder .voice-recorder__stop{flex-shrink:0}axm-chat-voice-recorder .voice-recorder__delete>button,axm-chat-voice-recorder .voice-recorder__stop>button{display:flex;height:calc(var(--spacing, .25rem) * 12);width:calc(var(--spacing, .25rem) * 12);align-items:center;justify-content:center;border-radius:var(--radius-xl, .75rem);--tw-border-style: none;border-style:none;padding:0;font-size:var(--text-lg, 1.125rem);line-height:var(--tw-leading, var(--text-lg--line-height, calc(1.75 / 1.125)));box-shadow:none}axm-chat-voice-recorder .voice-recorder__delete>button{color:rgb(var(--ax-sys-color-danger-600));background:rgba(var(--ax-sys-color-danger-500),.14)}axm-chat-voice-recorder .voice-recorder__stop>button{color:rgb(var(--ax-sys-color-on-surface));background:rgba(var(--ax-sys-color-on-surface),.08)}axm-chat-voice-recorder .voice-recorder__delete:hover>button,axm-chat-voice-recorder .voice-recorder__delete>button:hover{background:rgba(var(--ax-sys-color-danger-500),.22)}axm-chat-voice-recorder .voice-recorder__stop:hover>button,axm-chat-voice-recorder .voice-recorder__stop>button:hover{background:rgba(var(--ax-sys-color-on-surface),.14)}}@property --tw-leading{syntax: \"*\"; inherits: false;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-ordinal{syntax: \"*\"; inherits: false;}@property --tw-slashed-zero{syntax: \"*\"; inherits: false;}@property --tw-numeric-figure{syntax: \"*\"; inherits: false;}@property --tw-numeric-spacing{syntax: \"*\"; inherits: false;}@property --tw-numeric-fraction{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;--tw-ordinal: initial;--tw-slashed-zero: initial;--tw-numeric-figure: initial;--tw-numeric-spacing: initial;--tw-numeric-fraction: initial}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "component", type: AXAudioWaveComponent, selector: "ax-audio-wave", inputs: ["config"], outputs: ["onStatusChanged"] }, { kind: "component", type: 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: "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: AXLoadingModule }, { kind: "component", type: i6.AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "context"], outputs: ["visibleChange"] }, { kind: "ngmodule", type: AXProgressBarModule }, { kind: "component", type: i3$1.AXProgressBarComponent, selector: "ax-progress-bar", inputs: ["color", "mode", "progress", "height"], outputs: ["ValueChange", "sizeChange"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: i1$2.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXMChatVoiceRecorderComponent, isStandalone: true, selector: "axm-chat-voice-recorder", inputs: { conversation: { classPropertyName: "conversation", publicName: "conversation", isSignal: true, isRequired: true, transformFunction: null }, service: { classPropertyName: "service", publicName: "service", isSignal: true, isRequired: false, transformFunction: null }, initialFiles: { classPropertyName: "initialFiles", publicName: "initialFiles", isSignal: true, isRequired: false, transformFunction: null }, autoRun: { classPropertyName: "autoRun", publicName: "autoRun", isSignal: true, isRequired: false, transformFunction: null }, __popup__: { classPropertyName: "__popup__", publicName: "__popup__", isSignal: true, isRequired: false, transformFunction: null }, __actionSheet__: { classPropertyName: "__actionSheet__", publicName: "__actionSheet__", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { recordingComplete: "recordingComplete", recordingCancelled: "recordingCancelled" }, viewQueries: [{ propertyName: "waveWrapRef", first: true, predicate: ["waveWrap"], descendants: true, isSignal: true }, { propertyName: "waveRef", first: true, predicate: AXAudioWaveComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"voice-recorder\" [class.voice-recorder--preview]=\"isPreview()\" role=\"dialog\" aria-modal=\"true\" [attr.aria-label]=\"translation.translateSync('@conversation:chat.voice-recorder.title')\">\n  @if (isUploading()) {\n    <!-- ----- Upload progress while the voice file is sent ----- -->\n    <div class=\"voice-recorder__upload\">\n      <span class=\"voice-recorder__upload-label\">{{ getUploadingLabel() }}</span>\n      <ax-progress-bar [progress]=\"uploadProgress()\" [mode]=\"'determinate'\" [height]=\"6\" />\n    </div>\n  }\n  <!-- ----- Speech-to-text overlay while the recording is transcribed ----- -->\n  @else if (isTranscribing()) {\n    <div class=\"voice-recorder__upload\">\n      <ax-loading></ax-loading>\n      <span class=\"voice-recorder__upload-label\">{{ '@conversation:chat.voice-recorder.transcribing' | translate | async }}</span>\n    </div>\n  }\n  <!-- ----- Idle microphone before recording starts ----- -->\n  @else if (!isRecording() && !isPreview()) {\n    <div class=\"voice-recorder__idle\">\n      <button type=\"button\" class=\"voice-recorder__mic\" [attr.aria-label]=\"translation.translateSync('@conversation:chat.voice-recorder.tap-to-start')\" (click)=\"startRecording()\">\n        <i class=\"fa-light fa-microphone\" aria-hidden=\"true\"></i>\n      </button>\n      <span class=\"voice-recorder__hint\">{{ '@conversation:chat.voice-recorder.tap-to-start' | translate | async }}</span>\n    </div>\n  }\n  <!-- ----- Live waveform or paused preview with send actions ----- -->\n  @else {\n    <div class=\"voice-recorder__body\">\n      <div class=\"voice-recorder__visual\">\n        <div class=\"voice-recorder__wave-wrap\" #waveWrap>\n          <!-- ----- Live bars while the microphone is capturing ----- -->\n          @if (isRecording()) {\n            <div class=\"voice-recorder__live-wave\" aria-hidden=\"true\">\n              @for (bar of liveDisplayBars(); track bar.index) {\n                <span class=\"voice-recorder__bar\" [class.voice-recorder__bar--recorded]=\"bar.recorded\" [style.height.px]=\"bar.height\"></span>\n              }\n            </div>\n          }\n          <!-- ----- Preview waveform after recording is paused ----- -->\n          @else if (waveConfig(); as config) {\n            <ax-audio-wave class=\"voice-recorder__audio-wave\" [config]=\"config\" (onStatusChanged)=\"onWaveStatusChanged($event)\" />\n          }\n        </div>\n        <!-- ----- Play or pause the recorded preview ----- -->\n        @if (isPreview()) {\n          <ax-button\n            class=\"voice-recorder__play rounded-full\"\n            look=\"twotone\"\n            [iconOnly]=\"true\"\n            [text]=\"isPlayingPreview() ? translation.translateSync('@conversation:chat.media.pause') : translation.translateSync('@conversation:chat.media.play')\"\n            (onClick)=\"togglePreview()\"\n          >\n            <ax-icon>\n              <i class=\"fa-solid\" [class.fa-pause]=\"isPlayingPreview()\" [class.fa-play]=\"!isPlayingPreview()\"></i>\n            </ax-icon>\n          </ax-button>\n        }\n      </div>\n\n      <div class=\"voice-recorder__time\" aria-live=\"polite\">\n        {{ formattedTime() }}\n        <span class=\"sr-only\">{{ '@conversation:chat.voice-recorder.recording' | translate | async }}</span>\n      </div>\n    </div>\n\n    <footer class=\"voice-recorder__footer\">\n      <div class=\"voice-recorder__footer-start\">\n        <!-- ----- Delete the current recording ----- -->\n        @if (isPreview()) {\n          <ax-button class=\"voice-recorder__delete\" look=\"blank\" color=\"danger\" [iconOnly]=\"true\" [text]=\"translation.translateSync('@acorex:chat.actions.delete')\" (onClick)=\"deleteRecording()\">\n            <ax-icon><i class=\"fa-light fa-trash-can\"></i></ax-icon>\n          </ax-button>\n        }\n        <!-- ----- Pause recording or continue from preview ----- -->\n        @if (isRecording() || isPreview()) {\n          <ax-button\n            class=\"voice-recorder__stop\"\n            look=\"blank\"\n            [iconOnly]=\"true\"\n            [text]=\"isPreview() ? translation.translateSync('@conversation:chat.voice-recorder.continue-recording') : translation.translateSync('@conversation:chat.voice-recorder.stop-recording')\"\n            (onClick)=\"toggleStopOrContinue()\"\n          >\n            <ax-icon>\n              <i class=\"fa-solid\" [class.fa-pause]=\"isRecording()\" [class.fa-microphone]=\"isPreview()\"></i>\n            </ax-icon>\n          </ax-button>\n        }\n      </div>\n\n      <div class=\"voice-recorder__footer-end\">\n        <!-- ----- Convert the paused recording into composer text ----- -->\n        @if (isPreview()) {\n          <ax-button class=\"voice-recorder__transcribe\" look=\"outline\" color=\"secondary\" [text]=\"translation.translateSync('@conversation:chat.voice-recorder.transcribe')\" [disabled]=\"!canTranscribe()\" (onClick)=\"applySpeechToText()\">\n            <ax-prefix>\n              <ax-icon><i class=\"fa-light fa-waveform-lines\"></i></ax-icon>\n            </ax-prefix>\n          </ax-button>\n        }\n        <ax-button class=\"voice-recorder__send\" look=\"solid\" color=\"primary\" [text]=\"translation.translateSync('@acorex:chat.actions.send')\" [disabled]=\"!canSend()\" (onClick)=\"sendRecording()\">\n          <ax-prefix>\n            <ax-icon><i class=\"fa-light fa-paper-plane-top\"></i></ax-icon>\n          </ax-prefix>\n        </ax-button>\n      </div>\n    </footer>\n  }\n</div>\n", styles: ["@layer properties;@layer components{axm-chat-voice-recorder{display:flex;width:100%;flex-direction:column;container-type:inline-size}axm-chat-voice-recorder .voice-recorder{display:flex;width:100%;flex-direction:column;background-color:rgba(var(--ax-sys-color-lightest-surface));padding-inline:calc(var(--spacing, .25rem) * 5);padding-top:calc(var(--spacing, .25rem) * 5);padding-bottom:calc(var(--spacing, .25rem) * 5)}axm-chat-voice-recorder .voice-recorder__idle,axm-chat-voice-recorder .voice-recorder__upload{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 6);text-align:center}axm-chat-voice-recorder .voice-recorder__mic{display:flex;height:calc(var(--spacing, .25rem) * 16);width:calc(var(--spacing, .25rem) * 16);cursor:pointer;align-items:center;justify-content:center;border-radius:calc(infinity * 1px);--tw-border-style: none;border-style:none;padding:0;font-size:var(--text-2xl, 1.5rem);line-height:var(--tw-leading, var(--text-2xl--line-height, calc(2 / 1.5)));color:rgb(var(--ax-sys-color-on-primary-500));background:rgb(var(--ax-sys-color-primary-500));box-shadow:0 .5rem 1.25rem rgba(var(--ax-sys-color-primary-500),.28)}axm-chat-voice-recorder .voice-recorder__mic:hover,axm-chat-voice-recorder .voice-recorder__mic:focus-visible{--tw-outline-style: none;outline-style:none;background:rgb(var(--ax-sys-color-primary-600))}axm-chat-voice-recorder .voice-recorder__hint,axm-chat-voice-recorder .voice-recorder__upload-label{margin:0;font-size:.8125rem;--tw-leading: var(--leading-snug, 1.375);line-height:var(--leading-snug, 1.375);color:rgba(var(--ax-sys-color-on-surface),.62)}axm-chat-voice-recorder .voice-recorder__upload{width:100%;max-width:calc(var(--spacing, .25rem) * 72);gap:calc(var(--spacing, .25rem) * 2.5)}axm-chat-voice-recorder .voice-recorder__body{display:flex;width:100%;flex-direction:column;align-items:center}axm-chat-voice-recorder .voice-recorder__visual{display:flex;width:100%;min-width:0px;align-items:center;gap:calc(var(--spacing, .25rem) * 3)}axm-chat-voice-recorder .voice-recorder__wave-wrap{position:relative;display:flex;min-height:calc(var(--spacing, .25rem) * 14);min-width:0px;flex:1;align-items:center}axm-chat-voice-recorder .voice-recorder--preview .voice-recorder__wave-wrap{border-radius:var(--radius-xl, .75rem);padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:calc(var(--spacing, .25rem) * 2);background:rgba(var(--ax-sys-color-primary-500),.08)}axm-chat-voice-recorder .voice-recorder__live-wave{display:flex;height:calc(var(--spacing, .25rem) * 9);width:100%;min-width:0px;align-items:center;gap:2px}axm-chat-voice-recorder .voice-recorder__bar{display:block;flex:1 1 0;min-width:0;border-radius:2px;background:rgba(var(--ax-sys-color-on-surface),.16);transform-origin:center}axm-chat-voice-recorder .voice-recorder__bar--recorded{background:rgb(var(--ax-sys-color-primary-500))}axm-chat-voice-recorder .voice-recorder__audio-wave{display:block;min-height:calc(var(--spacing, .25rem) * 9);width:100%;min-width:0px;flex:1}axm-chat-voice-recorder .voice-recorder__audio-wave .ax-audio-wave,axm-chat-voice-recorder .voice-recorder__audio-wave .ax-audio-wave-host{display:block;width:100%}axm-chat-voice-recorder .voice-recorder__play{position:relative;z-index:1;flex-shrink:0}axm-chat-voice-recorder .voice-recorder__play .fa-play{padding-inline-start:.12rem;font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)))}axm-chat-voice-recorder .voice-recorder__play .fa-pause{font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)))}axm-chat-voice-recorder .voice-recorder__time{margin-top:calc(var(--spacing, .25rem) * 4);font-size:1.25rem;--tw-leading: 1;line-height:1;--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);color:rgba(var(--ax-sys-color-on-surface));--tw-numeric-spacing: tabular-nums;font-variant-numeric:var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,)}axm-chat-voice-recorder .voice-recorder__footer{margin-top:calc(var(--spacing, .25rem) * 6);display:flex;align-items:center;justify-content:space-between;gap:calc(var(--spacing, .25rem) * 3)}axm-chat-voice-recorder .voice-recorder__footer:dir(rtl){flex-direction:row-reverse}axm-chat-voice-recorder .voice-recorder__footer-start,axm-chat-voice-recorder .voice-recorder__footer-end{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 3)}axm-chat-voice-recorder .voice-recorder__footer-end,axm-chat-voice-recorder .voice-recorder__transcribe,axm-chat-voice-recorder .voice-recorder__send{min-width:0px}axm-chat-voice-recorder .voice-recorder__transcribe>button,axm-chat-voice-recorder .voice-recorder__send>button{display:flex;height:calc(var(--spacing, .25rem) * 12);align-items:center;justify-content:center;gap:calc(var(--spacing, .25rem) * 2);border-radius:var(--radius-xl, .75rem);padding-inline:calc(var(--spacing, .25rem) * 3);font-size:.9375rem;--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);box-shadow:none;background-image:none}axm-chat-voice-recorder .voice-recorder__send .fa-paper-plane-top:dir(rtl){transform:scaleX(-1)}axm-chat-voice-recorder .voice-recorder__delete,axm-chat-voice-recorder .voice-recorder__stop{flex-shrink:0}axm-chat-voice-recorder .voice-recorder__delete>button,axm-chat-voice-recorder .voice-recorder__stop>button{display:flex;height:calc(var(--spacing, .25rem) * 12);width:calc(var(--spacing, .25rem) * 12);align-items:center;justify-content:center;border-radius:var(--radius-xl, .75rem);--tw-border-style: none;border-style:none;padding:0;font-size:var(--text-lg, 1.125rem);line-height:var(--tw-leading, var(--text-lg--line-height, calc(1.75 / 1.125)));box-shadow:none}axm-chat-voice-recorder .voice-recorder__delete>button{color:rgb(var(--ax-sys-color-danger-600));background:rgba(var(--ax-sys-color-danger-500),.14)}axm-chat-voice-recorder .voice-recorder__stop>button{color:rgb(var(--ax-sys-color-on-surface));background:rgba(var(--ax-sys-color-on-surface),.08)}axm-chat-voice-recorder .voice-recorder__delete:hover>button,axm-chat-voice-recorder .voice-recorder__delete>button:hover{background:rgba(var(--ax-sys-color-danger-500),.22)}axm-chat-voice-recorder .voice-recorder__stop:hover>button,axm-chat-voice-recorder .voice-recorder__stop>button:hover{background:rgba(var(--ax-sys-color-on-surface),.14)}}@property --tw-leading{syntax: \"*\"; inherits: false;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-ordinal{syntax: \"*\"; inherits: false;}@property --tw-slashed-zero{syntax: \"*\"; inherits: false;}@property --tw-numeric-figure{syntax: \"*\"; inherits: false;}@property --tw-numeric-spacing{syntax: \"*\"; inherits: false;}@property --tw-numeric-fraction{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;--tw-ordinal: initial;--tw-slashed-zero: initial;--tw-numeric-figure: initial;--tw-numeric-spacing: initial;--tw-numeric-fraction: initial}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "component", type: AXAudioWaveComponent, selector: "ax-audio-wave", inputs: ["config"], outputs: ["onStatusChanged"] }, { kind: "component", type: 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: "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: AXLoadingModule }, { kind: "component", type: i8.AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "context"], outputs: ["visibleChange"] }, { kind: "ngmodule", type: AXProgressBarModule }, { kind: "component", type: i3$1.AXProgressBarComponent, selector: "ax-progress-bar", inputs: ["color", "mode", "progress", "height"], outputs: ["ValueChange", "sizeChange"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: i1$2.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXMChatVoiceRecorderComponent, decorators: [{
             type: Component,
@@ -14315,7 +14418,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-ooiJkC8U.mjs').then((module) => module.AXMChatCallStartPopupComponent),
+        load: () => import('./acorex-platform-module-conversation-client-chat-call-start-popup.component-BEa8wEJt.mjs').then((module) => module.AXMChatCallStartPopupComponent),
         data: { conversationId: conversation.id },
         show: (component) => popupService.open(component, {
             header: false,
@@ -14597,7 +14700,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-jsHo7NZq.mjs').then(function (n) { return n.b; }).then((m) => m.AXMAssistMessageRendererComponent),
+    componentLoader: () => import('./acorex-platform-module-conversation-client-assist-message-renderer.component-CR4OxDV6.mjs').then(function (n) { return n.b; }).then((m) => m.AXMAssistMessageRendererComponent),
     canHandle: (message) => message.type === 'assist-response' || !!message.metadata?.['isAssistResponse'],
     capabilities: {
         supportsReactions: false,
@@ -14741,7 +14844,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-ePQikBd2.mjs').then((module) => module.AXMChatCallSessionPageComponent),
+            load: () => import('./acorex-platform-module-conversation-client-chat-call-session-page.component-DJreBgNo.mjs').then((module) => module.AXMChatCallSessionPageComponent),
             data: {
                 conversationId: conversation.id,
                 callId: scopedCallId,
@@ -16861,7 +16964,7 @@ class AXMCommentsPageComponentProvider {
         return [
             {
                 key: COMMENTS_PAGE_COMPONENT_KEY,
-                loader: () => import('./acorex-platform-module-conversation-client-comments-page.component-BW_XRzT6.mjs').then((m) => m.AXMCommentsPageComponent),
+                loader: () => import('./acorex-platform-module-conversation-client-comments-page.component-BsE6bCZT.mjs').then((m) => m.AXMCommentsPageComponent),
             },
         ];
     }
@@ -17167,19 +17270,19 @@ class AXMConversationModule {
             provideCommandSetups([
                 {
                     key: CONVERSATION_AFTER_MESSAGE_SENT_COMMAND,
-                    command: () => import('./acorex-platform-module-conversation-client-after-message-sent.command-e_3t71gw.mjs').then((m) => m.AXMConversationAfterMessageSentCommand),
+                    command: () => import('./acorex-platform-module-conversation-client-after-message-sent.command-JjZrYD2R.mjs').then((m) => m.AXMConversationAfterMessageSentCommand),
                 },
                 {
                     key: CONVERSATION_RETRY_ASSIST_RESPONSE_COMMAND,
-                    command: () => import('./acorex-platform-module-conversation-client-retry-assist-response.command-CC0jPXGP.mjs').then((m) => m.AXMConversationRetryAssistResponseCommand),
+                    command: () => import('./acorex-platform-module-conversation-client-retry-assist-response.command-BvzWaKX4.mjs').then((m) => m.AXMConversationRetryAssistResponseCommand),
                 },
                 {
                     key: CONVERSATION_SYNC_READ_STATE_COMMAND,
-                    command: () => import('./acorex-platform-module-conversation-client-sync-read-state.command-BUtdyniC.mjs').then((m) => m.AXMConversationSyncReadStateCommand),
+                    command: () => import('./acorex-platform-module-conversation-client-sync-read-state.command-DQXezGRu.mjs').then((m) => m.AXMConversationSyncReadStateCommand),
                 },
                 {
                     key: CONVERSATION_MARK_CONVERSATION_UNREAD_COMMAND,
-                    command: () => import('./acorex-platform-module-conversation-client-mark-conversation-unread.command-Cdd6Cxkf.mjs').then((m) => m.AXMConversationMarkConversationUnreadCommand),
+                    command: () => import('./acorex-platform-module-conversation-client-mark-conversation-unread.command-B1mvtbaA.mjs').then((m) => m.AXMConversationMarkConversationUnreadCommand),
                 },
                 {
                     key: CONVERSATION_EMIT_TYPING_INDICATOR_COMMAND,
@@ -17191,7 +17294,7 @@ class AXMConversationModule {
                 },
                 {
                     key: CONVERSATION_OPEN_CHAT_COMMAND,
-                    command: () => import('./acorex-platform-module-conversation-client-open-chat.command-TfSLQn3K.mjs').then((m) => m.AXMConversationOpenChatCommand),
+                    command: () => import('./acorex-platform-module-conversation-client-open-chat.command-CbJ0gXZq.mjs').then((m) => m.AXMConversationOpenChatCommand),
                 },
                 {
                     key: 'show-comment-popup',
@@ -17310,19 +17413,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-e_3t71gw.mjs').then((m) => m.AXMConversationAfterMessageSentCommand),
+                                command: () => import('./acorex-platform-module-conversation-client-after-message-sent.command-JjZrYD2R.mjs').then((m) => m.AXMConversationAfterMessageSentCommand),
                             },
                             {
                                 key: CONVERSATION_RETRY_ASSIST_RESPONSE_COMMAND,
-                                command: () => import('./acorex-platform-module-conversation-client-retry-assist-response.command-CC0jPXGP.mjs').then((m) => m.AXMConversationRetryAssistResponseCommand),
+                                command: () => import('./acorex-platform-module-conversation-client-retry-assist-response.command-BvzWaKX4.mjs').then((m) => m.AXMConversationRetryAssistResponseCommand),
                             },
                             {
                                 key: CONVERSATION_SYNC_READ_STATE_COMMAND,
-                                command: () => import('./acorex-platform-module-conversation-client-sync-read-state.command-BUtdyniC.mjs').then((m) => m.AXMConversationSyncReadStateCommand),
+                                command: () => import('./acorex-platform-module-conversation-client-sync-read-state.command-DQXezGRu.mjs').then((m) => m.AXMConversationSyncReadStateCommand),
                             },
                             {
                                 key: CONVERSATION_MARK_CONVERSATION_UNREAD_COMMAND,
-                                command: () => import('./acorex-platform-module-conversation-client-mark-conversation-unread.command-Cdd6Cxkf.mjs').then((m) => m.AXMConversationMarkConversationUnreadCommand),
+                                command: () => import('./acorex-platform-module-conversation-client-mark-conversation-unread.command-B1mvtbaA.mjs').then((m) => m.AXMConversationMarkConversationUnreadCommand),
                             },
                             {
                                 key: CONVERSATION_EMIT_TYPING_INDICATOR_COMMAND,
@@ -17334,7 +17437,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-TfSLQn3K.mjs').then((m) => m.AXMConversationOpenChatCommand),
+                                command: () => import('./acorex-platform-module-conversation-client-open-chat.command-CbJ0gXZq.mjs').then((m) => m.AXMConversationOpenChatCommand),
                             },
                             {
                                 key: 'show-comment-popup',
@@ -17370,4 +17473,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-1tv00m7Y.mjs.map
+//# sourceMappingURL=acorex-platform-module-conversation-client-acorex-platform-module-conversation-client-CmRULmpl.mjs.map