@masterteam/discussion 0.0.1

package/fesm2022/masterteam-discussion.mjs

@@ -0,0 +1,1651 @@
+import * as i1 from '@angular/common';
+import { CommonModule, DatePipe } from '@angular/common';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import * as i0 from '@angular/core';
+import { inject, Injectable, DestroyRef, input, output, viewChild, signal, computed, effect, untracked, ChangeDetectionStrategy, Component } from '@angular/core';
+import * as i2 from '@angular/forms';
+import { FormsModule } from '@angular/forms';
+import { Button } from '@masterteam/components/button';
+import { Card } from '@masterteam/components/card';
+import { EntitiesPreview } from '@masterteam/components/entities';
+import * as i3 from 'primeng/dialog';
+import { DialogModule } from 'primeng/dialog';
+import { map, filter, Subject, firstValueFrom, debounceTime, distinctUntilChanged, switchMap, of, catchError, finalize } from 'rxjs';
+import { HttpClient, HttpContext, HttpParams, HttpEventType, HttpHeaders } from '@angular/common/http';
+import { REQUEST_CONTEXT } from '@masterteam/components';
+
+const MODULE_TYPE_ALIASES = {
+    leveldata: 'Level',
+    level: 'Level',
+    processrequest: 'ProcessRequest',
+    escalationinstance: 'EscalationInstance',
+};
+function normalizeDiscussionModuleType(moduleType) {
+    const value = moduleType.trim();
+    if (!value) {
+        return '';
+    }
+    const alias = MODULE_TYPE_ALIASES[value.toLowerCase()];
+    return alias ?? value;
+}
+function normalizeDiscussionRecordId(recordId) {
+    const value = Number(recordId);
+    if (!Number.isFinite(value)) {
+        return 0;
+    }
+    return Math.floor(value);
+}
+function isValidDiscussionThread(moduleType, recordId) {
+    return !!moduleType.trim() && normalizeDiscussionRecordId(recordId) > 0;
+}
+function buildDiscussionThreadKey(moduleType, recordId) {
+    const normalizedModuleType = normalizeDiscussionModuleType(moduleType);
+    const normalizedRecordId = normalizeDiscussionRecordId(recordId);
+    return normalizedModuleType && normalizedRecordId > 0
+        ? `${normalizedModuleType}/${normalizedRecordId}`
+        : '';
+}
+function unwrapAppResponseViewModel(response, fallbackMessage) {
+    if (response.code === 2) {
+        throw new Error(response.errors?.message || response.message || fallbackMessage);
+    }
+    return response.data;
+}
+function toDiscussionErrorMessage(error, fallbackMessage) {
+    if (typeof error === 'string') {
+        return error;
+    }
+    if (error instanceof Error) {
+        return error.message || fallbackMessage;
+    }
+    const nestedMessage = error?.error?.message ??
+        error?.message;
+    if (nestedMessage && typeof nestedMessage === 'string') {
+        return nestedMessage;
+    }
+    return fallbackMessage;
+}
+function readPathValue(source, path, fallback) {
+    if (!path.trim()) {
+        return source ?? fallback;
+    }
+    const keys = path.split('.').map((item) => item.trim());
+    let cursor = source;
+    for (const key of keys) {
+        if (!key || cursor == null || typeof cursor !== 'object') {
+            return fallback;
+        }
+        cursor = cursor[key];
+    }
+    return cursor ?? fallback;
+}
+function normalizeMentionUser(value) {
+    if (!value || typeof value !== 'object') {
+        return null;
+    }
+    const item = value;
+    const userIdRaw = item['userId'] ??
+        item['id'] ??
+        item['value'] ??
+        item['userID'] ??
+        item['user_id'];
+    const userId = String(userIdRaw ?? '').trim();
+    if (!userId) {
+        return null;
+    }
+    const displayNameRaw = item['displayName'] ??
+        item['name'] ??
+        item['fullName'] ??
+        item['userName'] ??
+        item['username'] ??
+        userId;
+    const displayName = String(displayNameRaw ?? userId).trim() || userId;
+    const userNameRaw = item['userName'] ?? item['username'] ?? null;
+    const avatarRaw = item['avatarUrl'] ?? item['photo'] ?? item['image'] ?? null;
+    return {
+        userId,
+        displayName,
+        userName: userNameRaw ? String(userNameRaw) : null,
+        avatarUrl: avatarRaw ? String(avatarRaw) : null,
+    };
+}
+function dedupeMentionUsers(users) {
+    const seen = new Set();
+    const result = [];
+    for (const user of users) {
+        const key = user.userId.toLowerCase();
+        if (seen.has(key)) {
+            continue;
+        }
+        seen.add(key);
+        result.push(user);
+    }
+    return result;
+}
+function sanitizeMentions(mentions, commentText) {
+    const textLength = commentText.length;
+    const unique = new Set();
+    const normalized = mentions
+        .map((mention) => ({
+        userId: mention.userId?.trim(),
+        startIndex: Math.floor(Number(mention.startIndex)),
+        length: Math.floor(Number(mention.length)),
+    }))
+        .filter((mention) => !!mention.userId &&
+        mention.startIndex >= 0 &&
+        mention.length > 0 &&
+        mention.startIndex + mention.length <= textLength)
+        .sort((left, right) => {
+        if (left.startIndex !== right.startIndex) {
+            return left.startIndex - right.startIndex;
+        }
+        return left.length - right.length;
+    })
+        .filter((mention) => {
+        const key = `${mention.userId}::${mention.startIndex}::${mention.length}`;
+        if (unique.has(key)) {
+            return false;
+        }
+        unique.add(key);
+        return true;
+    });
+    return normalized;
+}
+function mapSummaryToReadState(summary) {
+    return {
+        lastReadCommentId: summary.lastReadCommentId,
+        lastReadCommentCreatedAt: summary.lastReadCommentCreatedAt,
+        unreadCount: summary.unreadCount,
+        hasUnread: summary.hasUnread,
+    };
+}
+function mapReadStateToLike(readState) {
+    if (!readState) {
+        return null;
+    }
+    return {
+        lastReadCommentId: readState.lastReadCommentId,
+        lastReadCommentCreatedAt: readState.lastReadCommentCreatedAt,
+        unreadCount: readState.unreadCount,
+        hasUnread: readState.hasUnread,
+    };
+}
+
+class DiscussionApiService {
+    http = inject(HttpClient);
+    defaultContext = new HttpContext().set(REQUEST_CONTEXT, {
+        useBaseUrl: false,
+    });
+    baseRoute = 'discussions';
+    getThreadSummary(moduleType, recordId, context) {
+        return this.http
+            .get(this.threadRoute(moduleType, recordId), {
+            context: this.resolveContext(context),
+        })
+            .pipe(map((response) => unwrapAppResponseViewModel(response, 'Failed to load discussion.')));
+    }
+    getComments(moduleType, recordId, take = 30, cursor, context) {
+        let params = new HttpParams().set('take', String(take));
+        if (cursor) {
+            params = params.set('cursor', cursor);
+        }
+        return this.http
+            .get(`${this.threadRoute(moduleType, recordId)}/comments`, {
+            params,
+            context: this.resolveContext(context),
+        })
+            .pipe(map((response) => unwrapAppResponseViewModel(response, 'Failed to load discussion comments.')));
+    }
+    createComment(moduleType, recordId, request, context) {
+        return this.http
+            .post(`${this.threadRoute(moduleType, recordId)}/comments`, request, {
+            context: this.resolveContext(context),
+            headers: this.mutationHeaders('discussion-create-comment'),
+        })
+            .pipe(map((response) => unwrapAppResponseViewModel(response, 'Failed to create comment.')));
+    }
+    updateComment(moduleType, recordId, commentId, request, context) {
+        return this.http
+            .patch(`${this.threadRoute(moduleType, recordId)}/comments/${commentId}`, request, {
+            context: this.resolveContext(context),
+            headers: this.mutationHeaders('discussion-update-comment'),
+        })
+            .pipe(map((response) => unwrapAppResponseViewModel(response, 'Failed to update comment.')));
+    }
+    deleteComment(moduleType, recordId, commentId, context) {
+        return this.http
+            .delete(`${this.threadRoute(moduleType, recordId)}/comments/${commentId}`, {
+            context: this.resolveContext(context),
+            headers: this.mutationHeaders('discussion-delete-comment'),
+        })
+            .pipe(map((response) => unwrapAppResponseViewModel(response, 'Failed to delete comment.')));
+    }
+    getCommentRevisions(moduleType, recordId, commentId, context) {
+        return this.http
+            .get(`${this.threadRoute(moduleType, recordId)}/comments/${commentId}/revisions`, {
+            context: this.resolveContext(context),
+        })
+            .pipe(map((response) => unwrapAppResponseViewModel(response, 'Failed to load comment revisions.')));
+    }
+    getParticipants(moduleType, recordId, context) {
+        return this.http
+            .get(`${this.threadRoute(moduleType, recordId)}/participants`, {
+            context: this.resolveContext(context),
+        })
+            .pipe(map((response) => unwrapAppResponseViewModel(response, 'Failed to load discussion participants.')));
+    }
+    addParticipant(moduleType, recordId, request, context) {
+        return this.http
+            .post(`${this.threadRoute(moduleType, recordId)}/participants`, request, {
+            context: this.resolveContext(context),
+            headers: this.mutationHeaders('discussion-add-participant'),
+        })
+            .pipe(map((response) => unwrapAppResponseViewModel(response, 'Failed to add participant.')));
+    }
+    getReadState(moduleType, recordId, context) {
+        return this.http
+            .get(`${this.threadRoute(moduleType, recordId)}/read-state`, {
+            context: this.resolveContext(context),
+        })
+            .pipe(map((response) => unwrapAppResponseViewModel(response, 'Failed to load read state.')));
+    }
+    markReadState(moduleType, recordId, request, context) {
+        return this.http
+            .put(`${this.threadRoute(moduleType, recordId)}/read-state`, request?.lastReadCommentId ? request : {}, {
+            context: this.resolveContext(context),
+            headers: this.mutationHeaders('discussion-mark-read'),
+        })
+            .pipe(map((response) => unwrapAppResponseViewModel(response, 'Failed to mark read state.')));
+    }
+    clearReadState(moduleType, recordId, context) {
+        return this.http
+            .delete(`${this.threadRoute(moduleType, recordId)}/read-state`, {
+            context: this.resolveContext(context),
+            headers: this.mutationHeaders('discussion-clear-read'),
+        })
+            .pipe(map((response) => unwrapAppResponseViewModel(response, 'Failed to clear read state.')));
+    }
+    uploadAttachment(file, uploadEndpoint, context) {
+        const formData = new FormData();
+        formData.append('file', file);
+        return this.http
+            .post(uploadEndpoint, formData, {
+            reportProgress: true,
+            observe: 'events',
+            context: this.resolveContext(context),
+        })
+            .pipe(map((event) => {
+            if (event.type === HttpEventType.UploadProgress) {
+                return {
+                    progress: event.total
+                        ? Math.round((event.loaded / event.total) * 100)
+                        : 0,
+                    completed: false,
+                };
+            }
+            if (event.type === HttpEventType.Response && event.body) {
+                return {
+                    progress: 100,
+                    completed: true,
+                    file: this.mapUploadPayload(event.body, file),
+                };
+            }
+            return null;
+        }), filter((value) => value != null));
+    }
+    searchMentionUsers(endpoint, query, paramName, dataPath, context) {
+        const params = new HttpParams().set(paramName, query);
+        return this.http
+            .get(endpoint, {
+            params,
+            context: this.resolveContext(context),
+        })
+            .pipe(map((response) => {
+            const payload = this.unwrapUnknownResponse(response);
+            const candidates = readPathValue(payload, dataPath, Array.isArray(payload) ? payload : []);
+            return candidates
+                .map((item) => normalizeMentionUser(item))
+                .filter((item) => item != null);
+        }));
+    }
+    downloadAttachment(endpoint, fileId, fileName, context) {
+        const url = this.resolveDownloadEndpoint(endpoint, fileId);
+        return this.http
+            .get(url, {
+            responseType: 'blob',
+            context: this.resolveContext(context),
+        })
+            .pipe(map((blob) => {
+            const objectUrl = window.URL.createObjectURL(blob);
+            const link = document.createElement('a');
+            link.href = objectUrl;
+            link.download = fileName;
+            link.click();
+            window.URL.revokeObjectURL(objectUrl);
+        }));
+    }
+    threadRoute(moduleType, recordId) {
+        return `${this.baseRoute}/${encodeURIComponent(moduleType)}/${recordId}`;
+    }
+    resolveContext(context) {
+        return context ?? this.defaultContext;
+    }
+    mutationHeaders(seed) {
+        return new HttpHeaders({
+            'X-Idempotency-Key': this.idempotencyKey(seed),
+        });
+    }
+    idempotencyKey(seed) {
+        if (typeof crypto !== 'undefined' &&
+            typeof crypto.randomUUID === 'function') {
+            return `${seed}-${crypto.randomUUID()}`;
+        }
+        return `${seed}-${Date.now()}-${Math.random().toString(36).slice(2, 10)}`;
+    }
+    unwrapUnknownResponse(response) {
+        if (!response || typeof response !== 'object') {
+            return response;
+        }
+        const asResponse = response;
+        if (typeof asResponse.code === 'number' && asResponse.code === 2) {
+            throw new Error(asResponse.errors?.message ||
+                asResponse.message ||
+                'Request failed while loading mention candidates.');
+        }
+        if ('data' in asResponse) {
+            return asResponse.data;
+        }
+        return response;
+    }
+    mapUploadPayload(response, file) {
+        const payload = this.unwrapUnknownResponse(response);
+        // Uploader integrations usually expose:
+        // - fileName: storage key / retrievable id (for API payloads)
+        // - name: original file name (for UI display)
+        const fileId = String(payload?.fileId ??
+            payload?.fileName ??
+            payload?.id ??
+            payload?.name ??
+            file.name).trim();
+        const displayFileName = String(payload?.name ??
+            payload?.originalFileName ??
+            payload?.fileName ??
+            file.name).trim();
+        return {
+            fileId,
+            fileName: displayFileName || file.name,
+            contentType: payload?.contentType ?? file.type,
+            size: payload?.size ?? file.size,
+        };
+    }
+    resolveDownloadEndpoint(endpoint, fileId) {
+        const cleanEndpoint = endpoint.trim() || 'uploader';
+        if (cleanEndpoint.includes('{fileId}')) {
+            return cleanEndpoint.replace('{fileId}', encodeURIComponent(fileId));
+        }
+        return `${cleanEndpoint.replace(/\/$/, '')}/${encodeURIComponent(fileId)}`;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: DiscussionApiService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: DiscussionApiService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: DiscussionApiService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+class DiscussionThread {
+    api = inject(DiscussionApiService);
+    destroyRef = inject(DestroyRef);
+    moduleType = input.required(...(ngDevMode ? [{ debugName: "moduleType" }] : []));
+    recordId = input.required(...(ngDevMode ? [{ debugName: "recordId" }] : []));
+    title = input('Discussion', ...(ngDevMode ? [{ debugName: "title" }] : []));
+    subtitle = input('', ...(ngDevMode ? [{ debugName: "subtitle" }] : []));
+    placeholder = input('Write a message', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
+    pageSize = input(30, ...(ngDevMode ? [{ debugName: "pageSize" }] : []));
+    currentUserId = input('', ...(ngDevMode ? [{ debugName: "currentUserId" }] : []));
+    requestContext = input(undefined, ...(ngDevMode ? [{ debugName: "requestContext" }] : []));
+    mentionableUsers = input([], ...(ngDevMode ? [{ debugName: "mentionableUsers" }] : []));
+    mentionSearchEndpoint = input('', ...(ngDevMode ? [{ debugName: "mentionSearchEndpoint" }] : []));
+    mentionSearchParam = input('query', ...(ngDevMode ? [{ debugName: "mentionSearchParam" }] : []));
+    mentionSearchDataPath = input('data', ...(ngDevMode ? [{ debugName: "mentionSearchDataPath" }] : []));
+    allowAttachments = input(true, ...(ngDevMode ? [{ debugName: "allowAttachments" }] : []));
+    uploadEndpoint = input('uploader', ...(ngDevMode ? [{ debugName: "uploadEndpoint" }] : []));
+    attachmentDownloadEndpoint = input('uploader', ...(ngDevMode ? [{ debugName: "attachmentDownloadEndpoint" }] : []));
+    showParticipants = input(true, ...(ngDevMode ? [{ debugName: "showParticipants" }] : []));
+    autoMarkRead = input(true, ...(ngDevMode ? [{ debugName: "autoMarkRead" }] : []));
+    refreshIntervalMs = input(0, ...(ngDevMode ? [{ debugName: "refreshIntervalMs" }] : []));
+    styleClass = input('', ...(ngDevMode ? [{ debugName: "styleClass" }] : []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    loaded = output();
+    errored = output();
+    commentCreated = output();
+    commentUpdated = output();
+    commentDeleted = output();
+    readStateChanged = output();
+    viewportRef = viewChild('viewport', ...(ngDevMode ? [{ debugName: "viewportRef" }] : []));
+    composerInputRef = viewChild('composerInput', ...(ngDevMode ? [{ debugName: "composerInputRef" }] : []));
+    attachmentInputRef = viewChild('attachmentInput', ...(ngDevMode ? [{ debugName: "attachmentInputRef" }] : []));
+    loadingInitial = signal(false, ...(ngDevMode ? [{ debugName: "loadingInitial" }] : []));
+    loadingMore = signal(false, ...(ngDevMode ? [{ debugName: "loadingMore" }] : []));
+    posting = signal(false, ...(ngDevMode ? [{ debugName: "posting" }] : []));
+    refreshing = signal(false, ...(ngDevMode ? [{ debugName: "refreshing" }] : []));
+    markingRead = signal(false, ...(ngDevMode ? [{ debugName: "markingRead" }] : []));
+    participantsLoading = signal(false, ...(ngDevMode ? [{ debugName: "participantsLoading" }] : []));
+    savingEdit = signal(false, ...(ngDevMode ? [{ debugName: "savingEdit" }] : []));
+    revisionLoading = signal(false, ...(ngDevMode ? [{ debugName: "revisionLoading" }] : []));
+    errorMessage = signal(null, ...(ngDevMode ? [{ debugName: "errorMessage" }] : []));
+    threadSummary = signal(null, ...(ngDevMode ? [{ debugName: "threadSummary" }] : []));
+    commentsDesc = signal([], ...(ngDevMode ? [{ debugName: "commentsDesc" }] : []));
+    participants = signal([], ...(ngDevMode ? [{ debugName: "participants" }] : []));
+    readState = signal(null, ...(ngDevMode ? [{ debugName: "readState" }] : []));
+    nextCursor = signal(null, ...(ngDevMode ? [{ debugName: "nextCursor" }] : []));
+    hasMore = signal(false, ...(ngDevMode ? [{ debugName: "hasMore" }] : []));
+    composerText = signal('', ...(ngDevMode ? [{ debugName: "composerText" }] : []));
+    composerMentions = signal([], ...(ngDevMode ? [{ debugName: "composerMentions" }] : []));
+    composerAttachments = signal([], ...(ngDevMode ? [{ debugName: "composerAttachments" }] : []));
+    replyToCommentId = signal(null, ...(ngDevMode ? [{ debugName: "replyToCommentId" }] : []));
+    editingCommentId = signal(null, ...(ngDevMode ? [{ debugName: "editingCommentId" }] : []));
+    editText = signal('', ...(ngDevMode ? [{ debugName: "editText" }] : []));
+    editMentions = signal([], ...(ngDevMode ? [{ debugName: "editMentions" }] : []));
+    participantsExpanded = signal(false, ...(ngDevMode ? [{ debugName: "participantsExpanded" }] : []));
+    mentionSession = signal(null, ...(ngDevMode ? [{ debugName: "mentionSession" }] : []));
+    mentionCandidates = signal([], ...(ngDevMode ? [{ debugName: "mentionCandidates" }] : []));
+    mentionLoading = signal(false, ...(ngDevMode ? [{ debugName: "mentionLoading" }] : []));
+    mentionActiveIndex = signal(0, ...(ngDevMode ? [{ debugName: "mentionActiveIndex" }] : []));
+    mentionMenuPosition = signal(null, ...(ngDevMode ? [{ debugName: "mentionMenuPosition" }] : []));
+    mentionMenuStyle = computed(() => {
+        const position = this.mentionMenuPosition();
+        if (!position) {
+            return null;
+        }
+        return {
+            left: `${position.left}px`,
+            top: `${position.top}px`,
+            width: `${position.width}px`,
+            maxHeight: `${position.maxHeight}px`,
+        };
+    }, ...(ngDevMode ? [{ debugName: "mentionMenuStyle" }] : []));
+    revisionsDialogVisible = signal(false, ...(ngDevMode ? [{ debugName: "revisionsDialogVisible" }] : []));
+    selectedRevisionComment = signal(null, ...(ngDevMode ? [{ debugName: "selectedRevisionComment" }] : []));
+    revisionsByComment = signal(new Map(), ...(ngDevMode ? [{ debugName: "revisionsByComment" }] : []));
+    deletingCommentIds = signal(new Set(), ...(ngDevMode ? [{ debugName: "deletingCommentIds" }] : []));
+    atBottom = signal(true, ...(ngDevMode ? [{ debugName: "atBottom" }] : []));
+    resolvedModuleType = computed(() => normalizeDiscussionModuleType(this.moduleType()), ...(ngDevMode ? [{ debugName: "resolvedModuleType" }] : []));
+    resolvedRecordId = computed(() => normalizeDiscussionRecordId(this.recordId()), ...(ngDevMode ? [{ debugName: "resolvedRecordId" }] : []));
+    resolvedPageSize = computed(() => this.normalizePageSize(this.pageSize()), ...(ngDevMode ? [{ debugName: "resolvedPageSize" }] : []));
+    threadKey = computed(() => buildDiscussionThreadKey(this.resolvedModuleType(), this.resolvedRecordId()), ...(ngDevMode ? [{ debugName: "threadKey" }] : []));
+    commentsAsc = computed(() => [...this.commentsDesc()].reverse(), ...(ngDevMode ? [{ debugName: "commentsAsc" }] : []));
+    commentsById = computed(() => {
+        const map = new Map();
+        for (const comment of this.commentsDesc()) {
+            map.set(comment.id, comment);
+        }
+        return map;
+    }, ...(ngDevMode ? [{ debugName: "commentsById" }] : []));
+    replyToComment = computed(() => {
+        const parentId = this.replyToCommentId();
+        if (parentId == null) {
+            return null;
+        }
+        return this.commentsById().get(parentId) ?? null;
+    }, ...(ngDevMode ? [{ debugName: "replyToComment" }] : []));
+    readStateLike = computed(() => {
+        const currentReadState = this.readState();
+        if (currentReadState) {
+            return mapReadStateToLike(currentReadState);
+        }
+        const summary = this.threadSummary();
+        return summary ? mapSummaryToReadState(summary) : null;
+    }, ...(ngDevMode ? [{ debugName: "readStateLike" }] : []));
+    hasUnread = computed(() => this.readStateLike()?.hasUnread ?? false, ...(ngDevMode ? [{ debugName: "hasUnread" }] : []));
+    unreadCount = computed(() => this.readStateLike()?.unreadCount ?? 0, ...(ngDevMode ? [{ debugName: "unreadCount" }] : []));
+    firstUnreadCommentId = computed(() => this.resolveFirstUnreadCommentId(this.commentsAsc(), this.readStateLike()), ...(ngDevMode ? [{ debugName: "firstUnreadCommentId" }] : []));
+    mentionPool = computed(() => dedupeMentionUsers([
+        ...this.mentionableUsers(),
+        ...this.participants().map((participant) => ({
+            userId: participant.userId,
+            displayName: this.getParticipantDisplayName(participant),
+            userName: participant.user?.userName ?? null,
+            avatarUrl: participant.user?.photoUrl ?? null,
+        })),
+    ]), ...(ngDevMode ? [{ debugName: "mentionPool" }] : []));
+    participantEntities = computed(() => this.participants().map((participant, index) => ({
+        id: participant.id,
+        key: `participant-${participant.id}`,
+        name: 'Participant',
+        order: index + 1,
+        value: this.mapParticipantToEntityUserValue(participant),
+        viewType: 'User',
+        configuration: {
+            size: 24,
+            showBorder: true,
+            showDisplayName: true,
+        },
+    })), ...(ngDevMode ? [{ debugName: "participantEntities" }] : []));
+    uploadInProgress = computed(() => this.composerAttachments().some((item) => item.status === 'uploading'), ...(ngDevMode ? [{ debugName: "uploadInProgress" }] : []));
+    readyAttachmentFileIds = computed(() => this.composerAttachments()
+        .filter((item) => item.status === 'ready' && !!item.fileId)
+        .map((item) => item.fileId)
+        .filter((item) => !!item), ...(ngDevMode ? [{ debugName: "readyAttachmentFileIds" }] : []));
+    canSend = computed(() => {
+        if (this.disabled() || this.posting() || this.uploadInProgress()) {
+            return false;
+        }
+        const commentText = this.composerText();
+        return commentText.trim().length > 0 && commentText.length <= 10000;
+    }, ...(ngDevMode ? [{ debugName: "canSend" }] : []));
+    canSaveEdit = computed(() => {
+        if (this.disabled() || this.savingEdit()) {
+            return false;
+        }
+        const text = this.editText();
+        return text.trim().length > 0 && text.length <= 10000;
+    }, ...(ngDevMode ? [{ debugName: "canSaveEdit" }] : []));
+    charactersLeft = computed(() => 10000 - this.composerText().length, ...(ngDevMode ? [{ debugName: "charactersLeft" }] : []));
+    visibleRevisions = computed(() => {
+        const commentId = this.selectedRevisionComment()?.id;
+        if (commentId == null) {
+            return [];
+        }
+        return this.revisionsByComment().get(commentId) ?? [];
+    }, ...(ngDevMode ? [{ debugName: "visibleRevisions" }] : []));
+    mentionSearchTerms = new Subject();
+    mentionMenuMaxWidthPx = 352;
+    mentionMenuPreferredHeightPx = 260;
+    mentionMenuViewportPaddingPx = 8;
+    autoReadTimer = null;
+    constructor() {
+        this.bindMentionSearch();
+        effect(() => {
+            const moduleType = this.resolvedModuleType();
+            const recordId = this.resolvedRecordId();
+            this.requestContext();
+            if (!isValidDiscussionThread(moduleType, recordId)) {
+                this.resetData();
+                if (moduleType || recordId) {
+                    this.errorMessage.set('Invalid thread identity.');
+                }
+                return;
+            }
+            untracked(() => {
+                void this.loadThread();
+            });
+        });
+        effect((onCleanup) => {
+            const interval = this.refreshIntervalMs();
+            const key = this.threadKey();
+            if (!key || interval <= 0) {
+                return;
+            }
+            const timer = setInterval(() => {
+                void this.refreshThread();
+            }, interval);
+            onCleanup(() => clearInterval(timer));
+        });
+        effect((onCleanup) => {
+            if (typeof window === 'undefined') {
+                return;
+            }
+            const onViewportChange = () => this.positionMentionMenuForCurrentSession();
+            window.addEventListener('resize', onViewportChange);
+            onCleanup(() => {
+                window.removeEventListener('resize', onViewportChange);
+            });
+        });
+    }
+    trackComment(_, comment) {
+        return comment.id;
+    }
+    isOwnComment(comment) {
+        const currentUserId = this.currentUserId().trim().toLowerCase();
+        return !!currentUserId && comment.createdBy.toLowerCase() === currentUserId;
+    }
+    canEditComment(comment) {
+        return this.isOwnComment(comment) && !comment.isSystem;
+    }
+    canDeleteComment(comment) {
+        return this.isOwnComment(comment) && !comment.isSystem;
+    }
+    isDeleting(commentId) {
+        return this.deletingCommentIds().has(commentId);
+    }
+    getAvatarText(comment) {
+        const source = comment.createdBy || '?';
+        return source.slice(0, 1).toUpperCase();
+    }
+    getMentionAvatarText(user) {
+        const source = user.displayName || user.userName || user.userId || '?';
+        return source.slice(0, 1).toUpperCase();
+    }
+    getCommentSegments(comment) {
+        const text = comment.comment ?? '';
+        const mentions = sanitizeMentions(comment.mentions ?? [], text);
+        if (!mentions.length) {
+            return [{ text, isMention: false }];
+        }
+        const segments = [];
+        let cursor = 0;
+        for (const mention of mentions) {
+            if (mention.startIndex > cursor) {
+                segments.push({
+                    text: text.slice(cursor, mention.startIndex),
+                    isMention: false,
+                });
+            }
+            const mentionText = text.slice(mention.startIndex, mention.startIndex + mention.length);
+            if (mentionText) {
+                segments.push({
+                    text: mentionText,
+                    isMention: true,
+                    userId: mention.userId,
+                });
+            }
+            cursor = mention.startIndex + mention.length;
+        }
+        if (cursor < text.length) {
+            segments.push({
+                text: text.slice(cursor),
+                isMention: false,
+            });
+        }
+        return segments;
+    }
+    getParentComment(comment) {
+        if (comment.parentCommentId == null) {
+            return null;
+        }
+        return this.commentsById().get(comment.parentCommentId) ?? null;
+    }
+    openReply(comment) {
+        if (comment.isSystem) {
+            return;
+        }
+        this.replyToCommentId.set(comment.id);
+        this.focusComposer();
+    }
+    clearReply() {
+        this.replyToCommentId.set(null);
+    }
+    startEdit(comment) {
+        if (!this.canEditComment(comment)) {
+            return;
+        }
+        this.editingCommentId.set(comment.id);
+        this.editText.set(comment.comment);
+        this.editMentions.set(sanitizeMentions(comment.mentions ?? [], comment.comment));
+        this.closeMentionMenu();
+    }
+    cancelEdit() {
+        this.editingCommentId.set(null);
+        this.editText.set('');
+        this.editMentions.set([]);
+        this.closeMentionMenu();
+    }
+    async saveEdit() {
+        const commentId = this.editingCommentId();
+        if (commentId == null || !this.canSaveEdit()) {
+            return;
+        }
+        const commentText = this.editText();
+        const mentions = sanitizeMentions(this.editMentions(), commentText);
+        this.savingEdit.set(true);
+        try {
+            const updatedComment = await firstValueFrom(this.api.updateComment(this.resolvedModuleType(), this.resolvedRecordId(), commentId, {
+                comment: commentText,
+                mentions: mentions.length ? mentions : undefined,
+            }, this.requestContext()));
+            this.commentsDesc.update((comments) => comments.map((comment) => comment.id === updatedComment.id ? updatedComment : comment));
+            this.commentUpdated.emit(updatedComment);
+            this.cancelEdit();
+        }
+        catch (error) {
+            this.handleError(error, 'Unable to update comment.');
+        }
+        finally {
+            this.savingEdit.set(false);
+        }
+    }
+    async deleteComment(comment) {
+        if (!this.canDeleteComment(comment)) {
+            return;
+        }
+        const accepted = window.confirm('Delete this comment?');
+        if (!accepted) {
+            return;
+        }
+        this.deletingCommentIds.update((state) => {
+            const next = new Set(state);
+            next.add(comment.id);
+            return next;
+        });
+        try {
+            await firstValueFrom(this.api.deleteComment(this.resolvedModuleType(), this.resolvedRecordId(), comment.id, this.requestContext()));
+            this.commentsDesc.update((comments) => comments.filter((item) => item.id !== comment.id));
+            this.commentDeleted.emit(comment.id);
+            if (this.replyToCommentId() === comment.id) {
+                this.replyToCommentId.set(null);
+            }
+            if (this.editingCommentId() === comment.id) {
+                this.cancelEdit();
+            }
+            this.patchSummaryTotal(-1);
+            await this.refreshReadState();
+        }
+        catch (error) {
+            this.handleError(error, 'Unable to delete comment.');
+        }
+        finally {
+            this.deletingCommentIds.update((state) => {
+                const next = new Set(state);
+                next.delete(comment.id);
+                return next;
+            });
+        }
+    }
+    async sendComment() {
+        if (!this.canSend()) {
+            if (this.composerText().length > 10000) {
+                this.errorMessage.set('Comment cannot exceed 10000 characters.');
+            }
+            return;
+        }
+        const commentText = this.composerText();
+        const mentions = sanitizeMentions(this.composerMentions(), commentText);
+        this.posting.set(true);
+        try {
+            const createdComment = await firstValueFrom(this.api.createComment(this.resolvedModuleType(), this.resolvedRecordId(), {
+                comment: commentText,
+                parentCommentId: this.replyToCommentId(),
+                attachmentFileIds: this.readyAttachmentFileIds().length > 0
+                    ? this.readyAttachmentFileIds()
+                    : undefined,
+                mentions: mentions.length ? mentions : undefined,
+            }, this.requestContext()));
+            this.commentsDesc.update((comments) => [
+                createdComment,
+                ...comments.filter((comment) => comment.id !== createdComment.id),
+            ]);
+            this.patchSummaryTotal(1, createdComment.createdAt);
+            this.commentCreated.emit(createdComment);
+            this.resetComposer();
+            this.scheduleScrollToBottom('smooth');
+            this.scheduleAutoMarkRead();
+            if (this.showParticipants()) {
+                void this.reloadParticipantsQuiet();
+            }
+        }
+        catch (error) {
+            this.handleError(error, 'Unable to send comment.');
+        }
+        finally {
+            this.posting.set(false);
+        }
+    }
+    async loadOlder() {
+        if (!this.hasMore() || this.loadingMore()) {
+            return;
+        }
+        const cursor = this.nextCursor();
+        if (!cursor) {
+            return;
+        }
+        this.loadingMore.set(true);
+        try {
+            const page = await firstValueFrom(this.api.getComments(this.resolvedModuleType(), this.resolvedRecordId(), this.resolvedPageSize(), cursor, this.requestContext()));
+            const normalized = this.normalizeComments(page.items);
+            const existingIds = new Set(this.commentsDesc().map((item) => item.id));
+            const older = normalized.filter((item) => !existingIds.has(item.id));
+            this.commentsDesc.update((comments) => [...comments, ...older]);
+            this.applyCommentsPageMeta(page);
+        }
+        catch (error) {
+            if (this.isCursorError(error)) {
+                await this.loadThread({ quiet: true, preserveDraft: true });
+                this.errorMessage.set('Timeline cursor expired. Comments were reloaded from latest.');
+                return;
+            }
+            this.handleError(error, 'Unable to load older comments.');
+        }
+        finally {
+            this.loadingMore.set(false);
+        }
+    }
+    async refreshThread() {
+        if (this.loadingInitial() || this.refreshing()) {
+            return;
+        }
+        this.refreshing.set(true);
+        try {
+            await this.loadThread({ quiet: true, preserveDraft: true });
+        }
+        finally {
+            this.refreshing.set(false);
+        }
+    }
+    async markRead() {
+        if (this.markingRead()) {
+            return;
+        }
+        this.markingRead.set(true);
+        try {
+            const state = await firstValueFrom(this.api.markReadState(this.resolvedModuleType(), this.resolvedRecordId(), undefined, this.requestContext()));
+            this.readState.set(state);
+            this.readStateChanged.emit(state);
+            this.patchSummaryRead(state);
+        }
+        catch (error) {
+            this.handleError(error, 'Unable to update read state.', false);
+        }
+        finally {
+            this.markingRead.set(false);
+        }
+    }
+    async markUnread() {
+        if (this.markingRead()) {
+            return;
+        }
+        this.markingRead.set(true);
+        try {
+            await firstValueFrom(this.api.clearReadState(this.resolvedModuleType(), this.resolvedRecordId(), this.requestContext()));
+            await this.refreshReadState();
+        }
+        catch (error) {
+            this.handleError(error, 'Unable to update read state.');
+        }
+        finally {
+            this.markingRead.set(false);
+        }
+    }
+    onViewportScroll() {
+        const viewport = this.viewportRef()?.nativeElement;
+        if (!viewport) {
+            return;
+        }
+        const threshold = 40;
+        const isBottom = viewport.scrollTop + viewport.clientHeight >=
+            viewport.scrollHeight - threshold;
+        this.atBottom.set(isBottom);
+        if (isBottom) {
+            this.scheduleAutoMarkRead();
+        }
+        this.positionMentionMenuForCurrentSession();
+    }
+    onComposerInput(event) {
+        const textarea = event.target;
+        if (!textarea) {
+            return;
+        }
+        const before = this.composerText();
+        const after = textarea.value;
+        this.composerText.set(after);
+        this.composerMentions.set(this.rebaseMentions(before, after, this.composerMentions()));
+        this.updateMentionSession('composer', textarea, after);
+    }
+    onComposerCaretEvent(event) {
+        const textarea = event.target;
+        if (!textarea) {
+            return;
+        }
+        this.updateMentionSession('composer', textarea, this.composerText());
+    }
+    onComposerKeydown(event) {
+        if (this.handleMentionKeyboard(event)) {
+            return;
+        }
+        if (event.key === 'Enter' && !event.shiftKey) {
+            event.preventDefault();
+            void this.sendComment();
+        }
+    }
+    onEditInput(event) {
+        const textarea = event.target;
+        if (!textarea) {
+            return;
+        }
+        const before = this.editText();
+        const after = textarea.value;
+        this.editText.set(after);
+        this.editMentions.set(this.rebaseMentions(before, after, this.editMentions()));
+        this.updateMentionSession('edit', textarea, after);
+    }
+    onEditCaretEvent(event) {
+        const textarea = event.target;
+        if (!textarea) {
+            return;
+        }
+        this.updateMentionSession('edit', textarea, this.editText());
+    }
+    onEditKeydown(event) {
+        if (this.handleMentionKeyboard(event)) {
+            return;
+        }
+        if (event.key === 'Escape') {
+            event.preventDefault();
+            this.cancelEdit();
+        }
+    }
+    selectMention(user) {
+        const session = this.mentionSession();
+        if (!session) {
+            return;
+        }
+        if (session.mode === 'edit' &&
+            session.editCommentId !== this.editingCommentId()) {
+            this.closeMentionMenu();
+            return;
+        }
+        const mentionToken = `@${user.displayName}`;
+        const replacement = `${mentionToken} `;
+        const currentText = session.mode === 'composer' ? this.composerText() : this.editText();
+        const currentMentions = session.mode === 'composer'
+            ? this.composerMentions()
+            : this.editMentions();
+        const start = session.triggerIndex;
+        const end = session.caretIndex;
+        const nextText = currentText.slice(0, start) + replacement + currentText.slice(end);
+        const delta = replacement.length - (end - start);
+        const shiftedMentions = currentMentions
+            .filter((mention) => {
+            const mentionEnd = mention.startIndex + mention.length;
+            return mentionEnd <= start || mention.startIndex >= end;
+        })
+            .map((mention) => mention.startIndex >= end
+            ? {
+                ...mention,
+                startIndex: mention.startIndex + delta,
+            }
+            : mention);
+        const nextMentions = sanitizeMentions([
+            ...shiftedMentions,
+            {
+                userId: user.userId,
+                startIndex: start,
+                length: mentionToken.length,
+            },
+        ], nextText);
+        if (session.mode === 'composer') {
+            this.composerText.set(nextText);
+            this.composerMentions.set(nextMentions);
+        }
+        else {
+            this.editText.set(nextText);
+            this.editMentions.set(nextMentions);
+        }
+        const nextCaret = start + replacement.length;
+        this.closeMentionMenu();
+        queueMicrotask(() => {
+            session.textarea.focus();
+            session.textarea.setSelectionRange(nextCaret, nextCaret);
+        });
+    }
+    toggleParticipantsPanel() {
+        this.participantsExpanded.update((value) => !value);
+    }
+    async openRevisions(comment) {
+        this.selectedRevisionComment.set(comment);
+        this.revisionsDialogVisible.set(true);
+        const existing = this.revisionsByComment().get(comment.id);
+        if (existing) {
+            return;
+        }
+        this.revisionLoading.set(true);
+        try {
+            const revisions = await firstValueFrom(this.api.getCommentRevisions(this.resolvedModuleType(), this.resolvedRecordId(), comment.id, this.requestContext()));
+            this.revisionsByComment.update((state) => {
+                const next = new Map(state);
+                next.set(comment.id, revisions);
+                return next;
+            });
+        }
+        catch (error) {
+            this.handleError(error, 'Unable to load revisions.');
+        }
+        finally {
+            this.revisionLoading.set(false);
+        }
+    }
+    async downloadAttachment(comment, attachment) {
+        try {
+            await firstValueFrom(this.api.downloadAttachment(this.attachmentDownloadEndpoint(), attachment.fileId, attachment.fileName, this.requestContext()));
+        }
+        catch (error) {
+            this.handleError(error, `Unable to download attachment from comment #${comment.id}.`);
+        }
+    }
+    browseAttachments() {
+        if (!this.allowAttachments() || this.disabled()) {
+            return;
+        }
+        this.attachmentInputRef()?.nativeElement.click();
+    }
+    onAttachmentSelected(event) {
+        const target = event.target;
+        const files = target?.files;
+        if (!files?.length) {
+            return;
+        }
+        Array.from(files).forEach((file) => {
+            this.uploadAttachment(file);
+        });
+        if (target) {
+            target.value = '';
+        }
+    }
+    removeAttachment(draftId) {
+        this.composerAttachments.update((attachments) => attachments.filter((attachment) => attachment.id !== draftId));
+    }
+    uploadAttachment(file) {
+        const draftId = this.generateDraftId(file.name);
+        const draft = {
+            id: draftId,
+            fileId: null,
+            fileName: file.name,
+            contentType: file.type,
+            size: file.size,
+            progress: 0,
+            status: 'uploading',
+            error: null,
+        };
+        this.composerAttachments.update((attachments) => [...attachments, draft]);
+        this.api
+            .uploadAttachment(file, this.uploadEndpoint(), this.requestContext())
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe({
+            next: (uploadEvent) => {
+                this.composerAttachments.update((attachments) => attachments.map((item) => {
+                    if (item.id !== draftId) {
+                        return item;
+                    }
+                    if (!uploadEvent.completed) {
+                        return {
+                            ...item,
+                            progress: uploadEvent.progress,
+                        };
+                    }
+                    return {
+                        ...item,
+                        progress: 100,
+                        status: 'ready',
+                        fileId: uploadEvent.file?.fileId ?? item.fileId,
+                        fileName: uploadEvent.file?.fileName ?? item.fileName,
+                        contentType: uploadEvent.file?.contentType ?? item.contentType ?? '',
+                        size: uploadEvent.file?.size ?? item.size,
+                    };
+                }));
+            },
+            error: (error) => {
+                const errorMessage = toDiscussionErrorMessage(error, 'Attachment upload failed.');
+                this.composerAttachments.update((attachments) => attachments.map((item) => item.id === draftId
+                    ? {
+                        ...item,
+                        status: 'failed',
+                        error: errorMessage,
+                    }
+                    : item));
+                this.handleError(error, 'Attachment upload failed.');
+            },
+        });
+    }
+    async loadThread(options) {
+        if (!options?.quiet) {
+            this.loadingInitial.set(true);
+        }
+        this.errorMessage.set(null);
+        try {
+            const moduleType = this.resolvedModuleType();
+            const recordId = this.resolvedRecordId();
+            const [summary, comments] = await Promise.all([
+                firstValueFrom(this.api.getThreadSummary(moduleType, recordId, this.requestContext())),
+                firstValueFrom(this.api.getComments(moduleType, recordId, this.resolvedPageSize(), undefined, this.requestContext())),
+            ]);
+            this.threadSummary.set(summary);
+            this.loaded.emit(summary);
+            this.applyInitialComments(comments);
+            if (this.showParticipants()) {
+                void this.reloadParticipantsQuiet();
+            }
+            else {
+                this.participants.set([]);
+            }
+            await this.refreshReadState(comments);
+            if (!options?.preserveDraft) {
+                this.resetComposer();
+            }
+            this.scheduleScrollToBottom('auto');
+            this.scheduleAutoMarkRead();
+        }
+        catch (error) {
+            this.handleError(error, 'Unable to load discussion.');
+        }
+        finally {
+            this.loadingInitial.set(false);
+        }
+    }
+    async reloadParticipantsQuiet() {
+        this.participantsLoading.set(true);
+        try {
+            const participants = await firstValueFrom(this.api.getParticipants(this.resolvedModuleType(), this.resolvedRecordId(), this.requestContext()));
+            this.participants.set(this.mergeParticipants([], participants));
+        }
+        catch (error) {
+            this.handleError(error, 'Unable to load participants.', false);
+        }
+        finally {
+            this.participantsLoading.set(false);
+        }
+    }
+    async refreshReadState(commentsPage) {
+        try {
+            const state = await firstValueFrom(this.api.getReadState(this.resolvedModuleType(), this.resolvedRecordId(), this.requestContext()));
+            this.readState.set(state);
+            this.readStateChanged.emit(state);
+            this.patchSummaryRead(state);
+        }
+        catch {
+            if (commentsPage) {
+                const fallback = this.toReadStateFromPage(commentsPage);
+                this.readState.set(fallback);
+                this.readStateChanged.emit(fallback);
+                this.patchSummaryRead(fallback);
+            }
+        }
+    }
+    resetData() {
+        this.threadSummary.set(null);
+        this.commentsDesc.set([]);
+        this.participants.set([]);
+        this.readState.set(null);
+        this.nextCursor.set(null);
+        this.hasMore.set(false);
+        this.cancelEdit();
+        this.resetComposer();
+        this.participantsExpanded.set(false);
+        this.revisionsDialogVisible.set(false);
+        this.selectedRevisionComment.set(null);
+        this.revisionsByComment.set(new Map());
+    }
+    resetComposer() {
+        this.composerText.set('');
+        this.composerMentions.set([]);
+        this.composerAttachments.set([]);
+        this.replyToCommentId.set(null);
+        this.closeMentionMenu();
+    }
+    applyInitialComments(page) {
+        this.commentsDesc.set(this.normalizeComments(page.items));
+        this.applyCommentsPageMeta(page);
+    }
+    applyCommentsPageMeta(page) {
+        this.nextCursor.set(page.nextCursor ?? null);
+        this.hasMore.set(page.hasMore);
+        this.readState.update((state) => {
+            if (!state) {
+                return state;
+            }
+            return {
+                ...state,
+                lastReadCommentId: page.lastReadCommentId,
+                lastReadCommentCreatedAt: page.lastReadCommentCreatedAt,
+                lastReadAt: page.lastReadAt,
+                unreadCount: page.unreadCount,
+                hasUnread: page.hasUnread,
+            };
+        });
+    }
+    normalizeComments(comments) {
+        return [...comments]
+            .map((comment) => ({
+            ...comment,
+            attachments: [...(comment.attachments ?? [])].sort((left, right) => left.id - right.id),
+            mentions: sanitizeMentions(comment.mentions ?? [], comment.comment),
+        }))
+            .sort((left, right) => {
+            if (left.createdAt !== right.createdAt) {
+                return left.createdAt < right.createdAt ? 1 : -1;
+            }
+            return right.id - left.id;
+        });
+    }
+    rebaseMentions(previousText, currentText, mentions) {
+        if (previousText === currentText) {
+            return sanitizeMentions(mentions, currentText);
+        }
+        const mutation = this.computeTextMutation(previousText, currentText);
+        const adjusted = mentions
+            .map((mention) => {
+            const mentionStart = mention.startIndex;
+            const mentionEnd = mention.startIndex + mention.length;
+            if (mentionEnd <= mutation.start) {
+                return mention;
+            }
+            if (mentionStart >= mutation.beforeEnd) {
+                return {
+                    ...mention,
+                    startIndex: mentionStart + mutation.delta,
+                };
+            }
+            return null;
+        })
+            .filter((mention) => mention != null);
+        return sanitizeMentions(adjusted, currentText);
+    }
+    computeTextMutation(before, after) {
+        let start = 0;
+        while (start < before.length &&
+            start < after.length &&
+            before[start] === after[start]) {
+            start += 1;
+        }
+        let beforeEnd = before.length;
+        let afterEnd = after.length;
+        while (beforeEnd > start &&
+            afterEnd > start &&
+            before[beforeEnd - 1] === after[afterEnd - 1]) {
+            beforeEnd -= 1;
+            afterEnd -= 1;
+        }
+        return {
+            start,
+            beforeEnd,
+            delta: afterEnd - beforeEnd,
+        };
+    }
+    normalizePageSize(value) {
+        const parsed = Number(value);
+        if (!Number.isFinite(parsed)) {
+            return 30;
+        }
+        return Math.min(100, Math.max(1, Math.floor(parsed)));
+    }
+    isCursorError(error) {
+        const message = toDiscussionErrorMessage(error, '').toLowerCase();
+        return message.includes('cursor');
+    }
+    updateMentionSession(mode, textarea, text) {
+        const caretIndex = textarea.selectionStart ?? text.length;
+        const textBeforeCaret = text.slice(0, caretIndex);
+        const mentionMatch = textBeforeCaret.match(/(^|\s)@([^\s@]{0,64})$/);
+        if (!mentionMatch) {
+            if (this.mentionSession()?.mode === mode) {
+                this.closeMentionMenu();
+            }
+            return;
+        }
+        const query = mentionMatch[2] ?? '';
+        const triggerIndex = caretIndex - query.length - 1;
+        this.mentionSession.set({
+            mode,
+            triggerIndex,
+            caretIndex,
+            query,
+            textarea,
+            editCommentId: mode === 'edit' ? this.editingCommentId() : null,
+        });
+        this.mentionActiveIndex.set(0);
+        this.positionMentionMenu(textarea, caretIndex);
+        this.searchMentionCandidates(query);
+    }
+    searchMentionCandidates(query) {
+        const normalizedQuery = query.trim().toLowerCase();
+        const localUsers = this.mentionPool()
+            .filter((user) => this.matchesMentionQuery(user, normalizedQuery))
+            .slice(0, 12);
+        this.mentionCandidates.set(localUsers);
+        const endpoint = this.mentionSearchEndpoint().trim();
+        if (!endpoint || !normalizedQuery) {
+            this.mentionLoading.set(false);
+            return;
+        }
+        this.mentionSearchTerms.next({
+            query: normalizedQuery,
+            localUsers,
+        });
+    }
+    matchesMentionQuery(user, query) {
+        if (!query) {
+            return true;
+        }
+        const haystack = [user.userId, user.displayName, user.userName ?? '']
+            .join(' ')
+            .toLowerCase();
+        return haystack.includes(query);
+    }
+    bindMentionSearch() {
+        this.mentionSearchTerms
+            .pipe(debounceTime(220), distinctUntilChanged((left, right) => left.query === right.query), switchMap((value) => {
+            const endpoint = this.mentionSearchEndpoint().trim();
+            if (!endpoint || !value.query) {
+                return of(value.localUsers);
+            }
+            this.mentionLoading.set(true);
+            return this.api
+                .searchMentionUsers(endpoint, value.query, this.mentionSearchParam(), this.mentionSearchDataPath(), this.requestContext())
+                .pipe(map((remoteUsers) => dedupeMentionUsers([...value.localUsers, ...remoteUsers]).slice(0, 12)), catchError(() => of(value.localUsers)), finalize(() => this.mentionLoading.set(false)));
+        }), takeUntilDestroyed(this.destroyRef))
+            .subscribe((candidates) => {
+            if (!this.mentionSession()) {
+                return;
+            }
+            this.mentionCandidates.set(candidates);
+            this.mentionActiveIndex.set(0);
+            this.positionMentionMenuForCurrentSession();
+        });
+    }
+    handleMentionKeyboard(event) {
+        const session = this.mentionSession();
+        if (!session) {
+            return false;
+        }
+        const candidates = this.mentionCandidates();
+        if (!candidates.length) {
+            if (event.key === 'Escape') {
+                event.preventDefault();
+                this.closeMentionMenu();
+                return true;
+            }
+            return false;
+        }
+        if (event.key === 'ArrowDown') {
+            event.preventDefault();
+            this.mentionActiveIndex.update((index) => (index + 1) % this.mentionCandidates().length);
+            return true;
+        }
+        if (event.key === 'ArrowUp') {
+            event.preventDefault();
+            this.mentionActiveIndex.update((index) => {
+                const total = this.mentionCandidates().length;
+                return (index - 1 + total) % total;
+            });
+            return true;
+        }
+        if (event.key === 'Enter' || event.key === 'Tab') {
+            event.preventDefault();
+            const candidate = this.mentionCandidates()[this.mentionActiveIndex()];
+            if (candidate) {
+                this.selectMention(candidate);
+            }
+            return true;
+        }
+        if (event.key === 'Escape') {
+            event.preventDefault();
+            this.closeMentionMenu();
+            return true;
+        }
+        return false;
+    }
+    closeMentionMenu() {
+        this.mentionSession.set(null);
+        this.mentionCandidates.set([]);
+        this.mentionActiveIndex.set(0);
+        this.mentionLoading.set(false);
+        this.mentionMenuPosition.set(null);
+    }
+    positionMentionMenuForCurrentSession() {
+        const session = this.mentionSession();
+        if (!session) {
+            this.mentionMenuPosition.set(null);
+            return;
+        }
+        this.positionMentionMenu(session.textarea, session.caretIndex);
+    }
+    positionMentionMenu(textarea, caretIndex) {
+        const wrapper = textarea.parentElement;
+        if (!wrapper) {
+            this.mentionMenuPosition.set(null);
+            return;
+        }
+        const caret = this.measureMentionCaret(textarea, caretIndex);
+        if (!caret) {
+            this.mentionMenuPosition.set(null);
+            return;
+        }
+        const wrapperRect = wrapper.getBoundingClientRect();
+        const textareaRect = textarea.getBoundingClientRect();
+        const anchorViewportX = textareaRect.left + caret.x - textarea.scrollLeft;
+        const anchorViewportY = textareaRect.top + caret.y - textarea.scrollTop;
+        const menuWidth = Math.min(this.mentionMenuMaxWidthPx, window.innerWidth * 0.9);
+        const belowTopViewport = anchorViewportY + caret.lineHeight + 6;
+        const availableBelow = window.innerHeight - belowTopViewport - this.mentionMenuViewportPaddingPx;
+        const availableAbove = anchorViewportY - this.mentionMenuViewportPaddingPx;
+        const placeAbove = availableBelow < 180 && availableAbove > availableBelow;
+        const resolvedMaxHeight = Math.max(120, Math.min(this.mentionMenuPreferredHeightPx, (placeAbove ? availableAbove : availableBelow) - 10));
+        const desiredLeft = anchorViewportX;
+        const clampedLeft = Math.min(Math.max(this.mentionMenuViewportPaddingPx, desiredLeft), window.innerWidth - menuWidth - this.mentionMenuViewportPaddingPx);
+        const topBelow = belowTopViewport;
+        const topAbove = anchorViewportY - resolvedMaxHeight - 8;
+        const clampedTop = placeAbove
+            ? Math.max(this.mentionMenuViewportPaddingPx, topAbove)
+            : Math.max(this.mentionMenuViewportPaddingPx, topBelow);
+        this.mentionMenuPosition.set({
+            left: clampedLeft - wrapperRect.left,
+            top: clampedTop - wrapperRect.top,
+            width: menuWidth,
+            maxHeight: resolvedMaxHeight,
+            placement: placeAbove ? 'above' : 'below',
+        });
+    }
+    measureMentionCaret(textarea, caretIndex) {
+        const style = window.getComputedStyle(textarea);
+        const mirror = document.createElement('div');
+        const marker = document.createElement('span');
+        mirror.style.position = 'fixed';
+        mirror.style.left = '-9999px';
+        mirror.style.top = '0';
+        mirror.style.visibility = 'hidden';
+        mirror.style.pointerEvents = 'none';
+        mirror.style.whiteSpace = 'pre-wrap';
+        mirror.style.overflowWrap = 'break-word';
+        mirror.style.wordWrap = 'break-word';
+        mirror.style.boxSizing = style.boxSizing;
+        mirror.style.width = `${textarea.clientWidth}px`;
+        mirror.style.padding = style.padding;
+        mirror.style.border = style.border;
+        mirror.style.font = style.font;
+        mirror.style.fontSize = style.fontSize;
+        mirror.style.fontFamily = style.fontFamily;
+        mirror.style.fontWeight = style.fontWeight;
+        mirror.style.letterSpacing = style.letterSpacing;
+        mirror.style.lineHeight = style.lineHeight;
+        mirror.style.textAlign = style.textAlign;
+        mirror.style.textTransform = style.textTransform;
+        mirror.style.textIndent = style.textIndent;
+        mirror.style.tabSize = style.tabSize;
+        const safeCaret = Math.max(0, Math.min(caretIndex, textarea.value.length));
+        const beforeCaret = textarea.value.slice(0, safeCaret);
+        mirror.textContent = beforeCaret;
+        marker.textContent = '\u200b';
+        mirror.appendChild(marker);
+        document.body.appendChild(mirror);
+        try {
+            const mirrorRect = mirror.getBoundingClientRect();
+            const markerRect = marker.getBoundingClientRect();
+            return {
+                x: markerRect.left - mirrorRect.left,
+                y: markerRect.top - mirrorRect.top,
+                lineHeight: this.resolveMentionLineHeight(style),
+            };
+        }
+        finally {
+            document.body.removeChild(mirror);
+        }
+    }
+    resolveMentionLineHeight(style) {
+        const lineHeightRaw = style.lineHeight.trim().toLowerCase();
+        if (lineHeightRaw.endsWith('px')) {
+            const parsed = Number.parseFloat(lineHeightRaw);
+            if (Number.isFinite(parsed) && parsed > 0) {
+                return parsed;
+            }
+        }
+        const fontSizeRaw = style.fontSize.trim().toLowerCase();
+        const fontSize = fontSizeRaw.endsWith('px')
+            ? Number.parseFloat(fontSizeRaw)
+            : 14;
+        return Number.isFinite(fontSize) && fontSize > 0 ? fontSize * 1.4 : 20;
+    }
+    getParticipantDisplayName(participant) {
+        return (participant.user?.displayName?.trim() ||
+            participant.user?.fullName?.trim() ||
+            participant.user?.userName?.trim() ||
+            participant.userId);
+    }
+    mapParticipantToEntityUserValue(participant) {
+        const user = participant.user ?? participant.addedByUser ?? null;
+        return {
+            id: user?.id ?? participant.userId,
+            userName: user?.userName ?? undefined,
+            displayName: this.getParticipantDisplayName(participant),
+            photoUrl: user?.photoUrl ?? undefined,
+        };
+    }
+    mergeParticipants(current, incoming) {
+        const byUserId = new Map();
+        [...current, ...incoming].forEach((participant) => {
+            const key = participant.userId.toLowerCase();
+            if (!byUserId.has(key)) {
+                byUserId.set(key, participant);
+            }
+        });
+        return [...byUserId.values()].sort((left, right) => this.getParticipantDisplayName(left).localeCompare(this.getParticipantDisplayName(right)));
+    }
+    toReadStateFromPage(page) {
+        const moduleType = this.resolvedModuleType();
+        const recordId = this.resolvedRecordId();
+        return {
+            threadKey: buildDiscussionThreadKey(moduleType, recordId),
+            moduleType,
+            recordId,
+            userId: this.currentUserId(),
+            lastReadCommentId: page.lastReadCommentId,
+            lastReadCommentCreatedAt: page.lastReadCommentCreatedAt,
+            lastReadAt: page.lastReadAt,
+            unreadCount: page.unreadCount,
+            hasUnread: page.hasUnread,
+        };
+    }
+    resolveFirstUnreadCommentId(commentsAsc, readState) {
+        if (!commentsAsc.length || !readState?.hasUnread) {
+            return null;
+        }
+        const pointerCreatedAt = readState.lastReadCommentCreatedAt;
+        const pointerId = readState.lastReadCommentId;
+        if (!pointerCreatedAt && pointerId == null) {
+            return commentsAsc[0]?.id ?? null;
+        }
+        for (const comment of commentsAsc) {
+            if (this.isCommentAfterPointer(comment, pointerCreatedAt, pointerId)) {
+                return comment.id;
+            }
+        }
+        return null;
+    }
+    isCommentAfterPointer(comment, pointerCreatedAt, pointerId) {
+        if (!pointerCreatedAt && pointerId == null) {
+            return true;
+        }
+        if (pointerCreatedAt) {
+            if (comment.createdAt > pointerCreatedAt) {
+                return true;
+            }
+            if (comment.createdAt < pointerCreatedAt) {
+                return false;
+            }
+            return pointerId != null ? comment.id > pointerId : false;
+        }
+        return pointerId != null ? comment.id > pointerId : false;
+    }
+    focusComposer() {
+        queueMicrotask(() => {
+            this.composerInputRef()?.nativeElement.focus();
+        });
+    }
+    scheduleScrollToBottom(behavior) {
+        setTimeout(() => {
+            const viewport = this.viewportRef()?.nativeElement;
+            if (!viewport) {
+                return;
+            }
+            viewport.scrollTo({
+                top: viewport.scrollHeight,
+                behavior,
+            });
+            this.atBottom.set(true);
+        }, 0);
+    }
+    scheduleAutoMarkRead() {
+        if (!this.autoMarkRead() || !this.hasUnread() || !this.atBottom()) {
+            return;
+        }
+        if (this.autoReadTimer) {
+            clearTimeout(this.autoReadTimer);
+        }
+        this.autoReadTimer = setTimeout(() => {
+            this.autoReadTimer = null;
+            void this.markRead();
+        }, 300);
+    }
+    patchSummaryTotal(delta, lastCommentAt) {
+        this.threadSummary.update((summary) => {
+            if (!summary) {
+                return summary;
+            }
+            return {
+                ...summary,
+                totalComments: Math.max(0, summary.totalComments + delta),
+                lastCommentAt: lastCommentAt ?? summary.lastCommentAt,
+            };
+        });
+    }
+    patchSummaryRead(readState) {
+        this.threadSummary.update((summary) => {
+            if (!summary) {
+                return summary;
+            }
+            return {
+                ...summary,
+                lastReadCommentId: readState.lastReadCommentId,
+                lastReadCommentCreatedAt: readState.lastReadCommentCreatedAt,
+                lastReadAt: readState.lastReadAt,
+                unreadCount: readState.unreadCount,
+                hasUnread: readState.hasUnread,
+            };
+        });
+    }
+    handleError(error, fallbackMessage, setGlobalError = true) {
+        const message = toDiscussionErrorMessage(error, fallbackMessage);
+        if (setGlobalError) {
+            this.errorMessage.set(message);
+        }
+        this.errored.emit(message);
+    }
+    generateDraftId(fileName) {
+        if (typeof crypto !== 'undefined' &&
+            typeof crypto.randomUUID === 'function') {
+            return `${fileName}-${crypto.randomUUID()}`;
+        }
+        return `${fileName}-${Date.now()}-${Math.random().toString(36).slice(2, 9)}`;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: DiscussionThread, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: DiscussionThread, isStandalone: true, selector: "mt-discussion-thread", inputs: { moduleType: { classPropertyName: "moduleType", publicName: "moduleType", isSignal: true, isRequired: true, transformFunction: null }, recordId: { classPropertyName: "recordId", publicName: "recordId", isSignal: true, isRequired: true, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, currentUserId: { classPropertyName: "currentUserId", publicName: "currentUserId", isSignal: true, isRequired: false, transformFunction: null }, requestContext: { classPropertyName: "requestContext", publicName: "requestContext", isSignal: true, isRequired: false, transformFunction: null }, mentionableUsers: { classPropertyName: "mentionableUsers", publicName: "mentionableUsers", isSignal: true, isRequired: false, transformFunction: null }, mentionSearchEndpoint: { classPropertyName: "mentionSearchEndpoint", publicName: "mentionSearchEndpoint", isSignal: true, isRequired: false, transformFunction: null }, mentionSearchParam: { classPropertyName: "mentionSearchParam", publicName: "mentionSearchParam", isSignal: true, isRequired: false, transformFunction: null }, mentionSearchDataPath: { classPropertyName: "mentionSearchDataPath", publicName: "mentionSearchDataPath", isSignal: true, isRequired: false, transformFunction: null }, allowAttachments: { classPropertyName: "allowAttachments", publicName: "allowAttachments", isSignal: true, isRequired: false, transformFunction: null }, uploadEndpoint: { classPropertyName: "uploadEndpoint", publicName: "uploadEndpoint", isSignal: true, isRequired: false, transformFunction: null }, attachmentDownloadEndpoint: { classPropertyName: "attachmentDownloadEndpoint", publicName: "attachmentDownloadEndpoint", isSignal: true, isRequired: false, transformFunction: null }, showParticipants: { classPropertyName: "showParticipants", publicName: "showParticipants", isSignal: true, isRequired: false, transformFunction: null }, autoMarkRead: { classPropertyName: "autoMarkRead", publicName: "autoMarkRead", isSignal: true, isRequired: false, transformFunction: null }, refreshIntervalMs: { classPropertyName: "refreshIntervalMs", publicName: "refreshIntervalMs", isSignal: true, isRequired: false, transformFunction: null }, styleClass: { classPropertyName: "styleClass", publicName: "styleClass", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { loaded: "loaded", errored: "errored", commentCreated: "commentCreated", commentUpdated: "commentUpdated", commentDeleted: "commentDeleted", readStateChanged: "readStateChanged" }, host: { classAttribute: "block h-full min-h-0" }, viewQueries: [{ propertyName: "viewportRef", first: true, predicate: ["viewport"], descendants: true, isSignal: true }, { propertyName: "composerInputRef", first: true, predicate: ["composerInput"], descendants: true, isSignal: true }, { propertyName: "attachmentInputRef", first: true, predicate: ["attachmentInput"], descendants: true, isSignal: true }], ngImport: i0, template: "<mt-card\n  class=\"mt-discussion-card h-full min-h-0 w-full overflow-hidden shadow-sm\"\n  [paddingless]=\"true\"\n  [ngClass]=\"styleClass()\"\n>\n  <div class=\"flex h-full min-h-0 flex-col overflow-hidden\">\n    <input\n      #attachmentInput\n      type=\"file\"\n      class=\"hidden\"\n      multiple\n      (change)=\"onAttachmentSelected($event)\"\n    />\n\n    <header\n      class=\"flex flex-wrap items-start justify-between gap-3 border-b border-surface-200 px-4 py-3\"\n    >\n      <div class=\"min-w-0\">\n        <h3 class=\"truncate text-sm font-semibold uppercase tracking-[0.08em]\">\n          {{ title() }}\n        </h3>\n        @if (subtitle()) {\n          <p class=\"mt-1 text-xs text-surface-500\">{{ subtitle() }}</p>\n        }\n        <p class=\"mt-1 text-xs text-surface-500\">\n          {{ threadKey() || \"Discussion\" }}\n        </p>\n      </div>\n\n      <div class=\"flex flex-wrap items-center gap-2\">\n        @if (unreadCount() > 0) {\n          <span\n            class=\"inline-flex items-center rounded-full bg-red-100 px-2 py-0.5 text-xs font-semibold text-red-700\"\n          >\n            {{ unreadCount() }} unread\n          </span>\n        } @else {\n          <span\n            class=\"inline-flex items-center rounded-full bg-emerald-100 px-2 py-0.5 text-xs font-semibold text-emerald-700\"\n          >\n            Up to date\n          </span>\n        }\n\n        <mt-button\n          icon=\"arrow.refresh-cw-01\"\n          [label]=\"refreshing() ? 'Refreshing...' : 'Refresh'\"\n          size=\"small\"\n          [outlined]=\"true\"\n          [loading]=\"refreshing()\"\n          [disabled]=\"loadingInitial()\"\n          (onClick)=\"refreshThread()\"\n        />\n        <mt-button\n          icon=\"general.check\"\n          label=\"Mark read\"\n          size=\"small\"\n          [outlined]=\"true\"\n          [disabled]=\"markingRead() || !hasUnread()\"\n          (onClick)=\"markRead()\"\n        />\n        <mt-button\n          icon=\"communication.mail-01\"\n          label=\"Mark unread\"\n          size=\"small\"\n          [outlined]=\"true\"\n          [disabled]=\"markingRead()\"\n          (onClick)=\"markUnread()\"\n        />\n        @if (showParticipants()) {\n          <mt-button\n            icon=\"user.users-01\"\n            [label]=\"'Participants (' + participants().length + ')'\"\n            size=\"small\"\n            [outlined]=\"true\"\n            (onClick)=\"toggleParticipantsPanel()\"\n          />\n        }\n      </div>\n    </header>\n\n    @if (showParticipants() && participantsExpanded()) {\n      <section class=\"border-b border-surface-200 px-4 py-3\">\n        @if (participantsLoading()) {\n          <span class=\"text-xs text-surface-500\">Loading participants...</span>\n        } @else if (participantEntities().length === 0) {\n          <span class=\"text-xs text-surface-500\">No participants yet.</span>\n        } @else {\n          <div class=\"max-h-48 overflow-y-auto pr-1\">\n            <mt-entities-preview [entities]=\"participantEntities()\" />\n          </div>\n        }\n      </section>\n    }\n\n    @if (errorMessage(); as error) {\n      <div\n        class=\"border-b border-red-200 bg-red-50 px-4 py-2 text-sm text-red-700\"\n      >\n        {{ error }}\n      </div>\n    }\n\n    <div class=\"flex min-h-0 flex-1 flex-col overflow-hidden\">\n      <div\n        #viewport\n        class=\"min-h-0 flex-1 space-y-3 overflow-y-auto overscroll-contain px-3 py-3\"\n        (scroll)=\"onViewportScroll()\"\n      >\n        @if (hasMore()) {\n          <div class=\"flex justify-center py-1\">\n            <mt-button\n              icon=\"arrow.chevron-up\"\n              [label]=\"loadingMore() ? 'Loading...' : 'Load older messages'\"\n              size=\"small\"\n              [outlined]=\"true\"\n              [loading]=\"loadingMore()\"\n              (onClick)=\"loadOlder()\"\n            />\n          </div>\n        }\n\n        @if (loadingInitial()) {\n          <div class=\"space-y-2\">\n            @for (item of [1, 2, 3, 4]; track item) {\n              <div class=\"h-16 animate-pulse rounded-xl bg-surface-100\"></div>\n            }\n          </div>\n        } @else if (commentsAsc().length === 0) {\n          <div\n            class=\"rounded-2xl border border-dashed border-surface-300 p-8 text-center\"\n          >\n            <h4 class=\"text-sm font-semibold text-surface-700\">\n              No comments yet\n            </h4>\n            <p class=\"mt-1 text-xs text-surface-500\">Start the conversation.</p>\n          </div>\n        } @else {\n          @for (comment of commentsAsc(); track trackComment($index, comment)) {\n            @if (firstUnreadCommentId() === comment.id) {\n              <div class=\"my-1 flex items-center justify-center gap-2\">\n                <span\n                  class=\"flex-1 border-t border-dashed border-red-300\"\n                ></span>\n                <span\n                  class=\"rounded-full border border-red-200 bg-red-50 px-2 py-0.5 text-[0.67rem] font-bold leading-none text-red-700\"\n                  >Unread messages</span\n                >\n                <span\n                  class=\"flex-1 border-t border-dashed border-red-300\"\n                ></span>\n              </div>\n            }\n\n            <article\n              class=\"group flex gap-2\"\n              [class.justify-end]=\"isOwnComment(comment)\"\n            >\n              @if (!isOwnComment(comment)) {\n                <div\n                  class=\"mt-0.5 inline-flex h-[1.9rem] w-[1.9rem] shrink-0 items-center justify-center rounded-full border border-[color-mix(in_srgb,var(--p-primary-color)_20%,transparent)] bg-[color-mix(in_srgb,var(--p-primary-color)_16%,white)] text-[0.74rem] font-bold text-[color-mix(in_srgb,var(--p-primary-color)_75%,black)]\"\n                >\n                  {{ getAvatarText(comment) }}\n                </div>\n              }\n\n              <div\n                class=\"max-w-[88%] min-w-[16rem] rounded-2xl border border-surface-200 px-3 py-2\"\n                [class.bg-[color-mix(in_srgb,var(--p-primary-color)_7%,white)]]=\"\n                  isOwnComment(comment)\n                \"\n              >\n                <div\n                  class=\"mb-1 flex flex-wrap items-center justify-between gap-2\"\n                >\n                  <div class=\"text-xs text-surface-600\">\n                    <span class=\"font-semibold text-surface-900\">{{\n                      comment.createdBy\n                    }}</span>\n                    <span class=\"mx-1\">&bull;</span>\n                    <span>{{\n                      comment.createdAt | date: \"MMM d, y h:mm a\"\n                    }}</span>\n                    @if (comment.updatedAt) {\n                      <span class=\"ml-1 text-[11px] text-surface-500\"\n                        >(edited)</span\n                      >\n                    }\n                  </div>\n                </div>\n\n                @if (getParentComment(comment); as parentComment) {\n                  <button\n                    type=\"button\"\n                    class=\"mb-2 block w-full rounded-xl border border-surface-200 bg-surface-50 px-2 py-1 text-left text-xs text-surface-600\"\n                    (click)=\"openReply(parentComment)\"\n                  >\n                    <span class=\"font-semibold\">{{\n                      parentComment.createdBy\n                    }}</span>\n                    <span class=\"mx-1\">:</span>\n                    <span class=\"line-clamp-1\">{{\n                      parentComment.comment\n                    }}</span>\n                  </button>\n                }\n\n                @if (editingCommentId() === comment.id) {\n                  <div class=\"relative\">\n                    <textarea\n                      rows=\"3\"\n                      class=\"w-full min-h-[5.25rem] resize-y rounded-2xl border border-surface-300 bg-white px-3 py-2.5 text-[0.86rem] leading-[1.45] text-surface-900 outline-none focus-visible:outline-2 focus-visible:outline-[color-mix(in_srgb,var(--p-primary-color)_32%,transparent)] focus-visible:outline-offset-1\"\n                      [ngModel]=\"editText()\"\n                      (ngModelChange)=\"editText.set($event)\"\n                      (input)=\"onEditInput($event)\"\n                      (keyup)=\"onEditCaretEvent($event)\"\n                      (click)=\"onEditCaretEvent($event)\"\n                      (scroll)=\"onEditCaretEvent($event)\"\n                      (keydown)=\"onEditKeydown($event)\"\n                    ></textarea>\n\n                    @if (\n                      mentionSession()?.mode === \"edit\" &&\n                      mentionSession()?.editCommentId === comment.id\n                    ) {\n                      <div\n                        class=\"absolute top-0 left-0 z-20 min-w-56 overflow-auto rounded-xl border border-surface-300 bg-white shadow-[0_10px_40px_color-mix(in_srgb,black_14%,transparent)]\"\n                        [ngStyle]=\"mentionMenuStyle()\"\n                        [class.origin-bottom-left]=\"\n                          mentionMenuPosition()?.placement === 'above'\n                        \"\n                      >\n                        @if (mentionLoading()) {\n                          <div class=\"px-3 py-2 text-xs text-surface-500\">\n                            Searching...\n                          </div>\n                        } @else if (mentionCandidates().length === 0) {\n                          <div class=\"px-3 py-2 text-xs text-surface-500\">\n                            No matches\n                          </div>\n                        } @else {\n                          @for (\n                            candidate of mentionCandidates();\n                            track candidate.userId;\n                            let i = $index\n                          ) {\n                            <button\n                              type=\"button\"\n                              class=\"flex w-full cursor-pointer items-start gap-2 bg-transparent px-2.5 py-2 text-left text-[0.78rem] transition-colors hover:bg-[color-mix(in_srgb,var(--p-primary-color)_11%,white)]\"\n                              [class.bg-[color-mix(in_srgb,var(--p-primary-color)_11%,white)]]=\"\n                                mentionActiveIndex() === i\n                              \"\n                              (click)=\"selectMention(candidate)\"\n                            >\n                              <span\n                                class=\"mt-px inline-flex h-6 w-6 shrink-0 items-center justify-center rounded-full border border-[color-mix(in_srgb,var(--p-primary-color)_18%,transparent)] bg-[color-mix(in_srgb,var(--p-primary-color)_16%,white)] text-[0.7rem] font-bold text-[color-mix(in_srgb,var(--p-primary-color)_74%,black)]\"\n                              >\n                                {{ getMentionAvatarText(candidate) }}\n                              </span>\n                              <span\n                                class=\"flex min-w-0 flex-1 flex-col gap-0.5\"\n                              >\n                                <span\n                                  class=\"text-[0.79rem] leading-[1.25] font-semibold text-surface-900\"\n                                  >{{\n                                    candidate.displayName ||\n                                      candidate.userName ||\n                                      candidate.userId\n                                  }}</span\n                                >\n                                <span\n                                  class=\"inline-flex items-center text-[0.73rem] leading-[1.2] text-surface-500\"\n                                >\n                                  @{{ candidate.userId }}\n                                </span>\n                              </span>\n                            </button>\n                          }\n                        }\n                      </div>\n                    }\n                  </div>\n\n                  <div\n                    class=\"mt-2 flex flex-wrap items-center justify-between gap-2\"\n                  >\n                    <span class=\"text-xs text-surface-500\"\n                      >{{ editText().length }}/10000</span\n                    >\n                    <div class=\"flex items-center gap-2\">\n                      <button\n                        type=\"button\"\n                        class=\"rounded-[0.65rem] border border-surface-300 bg-transparent px-3 py-2 text-xs font-semibold leading-none text-surface-700 transition-colors hover:border-[color-mix(in_srgb,var(--p-primary-color)_24%,transparent)] hover:bg-[color-mix(in_srgb,var(--p-primary-color)_8%,white)] hover:text-[color-mix(in_srgb,var(--p-primary-color)_74%,black)] disabled:cursor-not-allowed disabled:opacity-55\"\n                        (click)=\"cancelEdit()\"\n                      >\n                        Cancel\n                      </button>\n                      <button\n                        type=\"button\"\n                        class=\"rounded-[0.65rem] border border-[color-mix(in_srgb,var(--p-primary-color)_26%,transparent)] bg-[color-mix(in_srgb,var(--p-primary-color)_12%,white)] px-3 py-2 text-xs font-bold leading-none text-[color-mix(in_srgb,var(--p-primary-color)_76%,black)] transition-colors hover:bg-[color-mix(in_srgb,var(--p-primary-color)_17%,white)] disabled:cursor-not-allowed disabled:opacity-55\"\n                        [disabled]=\"!canSaveEdit()\"\n                        (click)=\"saveEdit()\"\n                      >\n                        {{ savingEdit() ? \"Saving...\" : \"Save\" }}\n                      </button>\n                    </div>\n                  </div>\n                } @else {\n                  <div\n                    class=\"whitespace-pre-wrap break-words text-sm leading-6\"\n                  >\n                    @for (\n                      segment of getCommentSegments(comment);\n                      track $index\n                    ) {\n                      <span\n                        [ngClass]=\"\n                          segment.isMention\n                            ? 'rounded-sm bg-primary-50 px-0.5 font-semibold text-primary-700'\n                            : ''\n                        \"\n                        [attr.data-user-id]=\"segment.userId || null\"\n                      >\n                        {{ segment.text }}\n                      </span>\n                    }\n                  </div>\n\n                  @if (comment.attachments.length > 0) {\n                    <div class=\"mt-2 flex flex-wrap gap-2\">\n                      @for (\n                        attachment of comment.attachments;\n                        track attachment.id\n                      ) {\n                        <button\n                          type=\"button\"\n                          class=\"inline-flex max-w-full items-center gap-1.5 rounded-lg border border-surface-300 px-2 py-1 text-[0.72rem] hover:bg-surface-50\"\n                          (click)=\"downloadAttachment(comment, attachment)\"\n                        >\n                          <span class=\"truncate\">{{\n                            attachment.fileName\n                          }}</span>\n                          <span class=\"text-[11px] text-surface-500\"\n                            >({{ attachment.size | number }} bytes)</span\n                          >\n                        </button>\n                      }\n                    </div>\n                  }\n\n                  <div\n                    class=\"mt-2 flex flex-wrap items-center gap-1 opacity-100 md:opacity-0 md:group-hover:opacity-100\"\n                  >\n                    <button\n                      type=\"button\"\n                      class=\"rounded-lg bg-transparent px-2 py-1 text-[0.72rem] font-semibold leading-none text-surface-600 transition-colors hover:bg-[color-mix(in_srgb,var(--p-primary-color)_10%,white)] hover:text-[color-mix(in_srgb,var(--p-primary-color)_74%,black)] disabled:cursor-not-allowed disabled:opacity-55\"\n                      (click)=\"openReply(comment)\"\n                    >\n                      Reply\n                    </button>\n                    @if (canEditComment(comment)) {\n                      <button\n                        type=\"button\"\n                        class=\"rounded-lg bg-transparent px-2 py-1 text-[0.72rem] font-semibold leading-none text-surface-600 transition-colors hover:bg-[color-mix(in_srgb,var(--p-primary-color)_10%,white)] hover:text-[color-mix(in_srgb,var(--p-primary-color)_74%,black)] disabled:cursor-not-allowed disabled:opacity-55\"\n                        (click)=\"startEdit(comment)\"\n                      >\n                        Edit\n                      </button>\n                    }\n                    @if (canDeleteComment(comment)) {\n                      <button\n                        type=\"button\"\n                        class=\"rounded-lg bg-transparent px-2 py-1 text-[0.72rem] font-semibold leading-none text-red-600 transition-colors hover:bg-[color-mix(in_srgb,var(--p-primary-color)_10%,white)] disabled:cursor-not-allowed disabled:opacity-55\"\n                        [disabled]=\"isDeleting(comment.id)\"\n                        (click)=\"deleteComment(comment)\"\n                      >\n                        {{ isDeleting(comment.id) ? \"Deleting...\" : \"Delete\" }}\n                      </button>\n                    }\n                    @if (comment.updatedAt) {\n                      <button\n                        type=\"button\"\n                        class=\"rounded-lg bg-transparent px-2 py-1 text-[0.72rem] font-semibold leading-none text-surface-600 transition-colors hover:bg-[color-mix(in_srgb,var(--p-primary-color)_10%,white)] hover:text-[color-mix(in_srgb,var(--p-primary-color)_74%,black)] disabled:cursor-not-allowed disabled:opacity-55\"\n                        (click)=\"openRevisions(comment)\"\n                      >\n                        History\n                      </button>\n                    }\n                  </div>\n                }\n              </div>\n\n              @if (isOwnComment(comment)) {\n                <div\n                  class=\"mt-0.5 inline-flex h-[1.9rem] w-[1.9rem] shrink-0 items-center justify-center rounded-full border border-[color-mix(in_srgb,var(--p-primary-color)_20%,transparent)] bg-[color-mix(in_srgb,var(--p-primary-color)_16%,white)] text-[0.74rem] font-bold text-[color-mix(in_srgb,var(--p-primary-color)_75%,black)]\"\n                >\n                  {{ getAvatarText(comment) }}\n                </div>\n              }\n            </article>\n          }\n        }\n      </div>\n\n      <footer\n        class=\"z-10 shrink-0 border-t border-surface-200 bg-content px-3 py-3\"\n      >\n        @if (replyToComment(); as replyComment) {\n          <div\n            class=\"mb-2 flex items-center justify-between rounded-xl border border-surface-200 bg-surface-50 px-2 py-1\"\n          >\n            <div class=\"min-w-0 text-xs text-surface-600\">\n              <span class=\"font-semibold\"\n                >Replying to {{ replyComment.createdBy }}</span\n              >\n              <p class=\"truncate\">{{ replyComment.comment }}</p>\n            </div>\n            <button\n              type=\"button\"\n              class=\"rounded-lg bg-transparent px-2 py-1 text-[0.72rem] font-semibold leading-none text-surface-600 transition-colors hover:bg-[color-mix(in_srgb,var(--p-primary-color)_10%,white)] hover:text-[color-mix(in_srgb,var(--p-primary-color)_74%,black)] disabled:cursor-not-allowed disabled:opacity-55\"\n              (click)=\"clearReply()\"\n            >\n              Cancel\n            </button>\n          </div>\n        }\n\n        <div\n          class=\"rounded-2xl border border-surface-300 bg-white p-2 shadow-sm\"\n        >\n          <div class=\"relative\">\n            <textarea\n              #composerInput\n              rows=\"3\"\n              class=\"w-full min-h-[5.5rem] resize-y border-0 bg-transparent px-2 py-1 text-[0.9rem] leading-[1.45] text-surface-900 outline-none\"\n              [disabled]=\"disabled() || posting()\"\n              [ngModel]=\"composerText()\"\n              (ngModelChange)=\"composerText.set($event)\"\n              (input)=\"onComposerInput($event)\"\n              (keyup)=\"onComposerCaretEvent($event)\"\n              (click)=\"onComposerCaretEvent($event)\"\n              (scroll)=\"onComposerCaretEvent($event)\"\n              (keydown)=\"onComposerKeydown($event)\"\n              [placeholder]=\"placeholder()\"\n            ></textarea>\n\n            @if (mentionSession()?.mode === \"composer\") {\n              <div\n                class=\"absolute top-0 left-0 z-30 min-w-56 overflow-auto rounded-xl border border-surface-300 bg-white shadow-[0_10px_40px_color-mix(in_srgb,black_14%,transparent)]\"\n                [ngStyle]=\"mentionMenuStyle()\"\n                [class.origin-bottom-left]=\"\n                  mentionMenuPosition()?.placement === 'above'\n                \"\n              >\n                @if (mentionLoading()) {\n                  <div class=\"px-3 py-2 text-xs text-surface-500\">\n                    Searching...\n                  </div>\n                } @else if (mentionCandidates().length === 0) {\n                  <div class=\"px-3 py-2 text-xs text-surface-500\">\n                    No matches\n                  </div>\n                } @else {\n                  @for (\n                    candidate of mentionCandidates();\n                    track candidate.userId;\n                    let i = $index\n                  ) {\n                    <button\n                      type=\"button\"\n                      class=\"flex w-full cursor-pointer items-start gap-2 bg-transparent px-2.5 py-2 text-left text-[0.78rem] transition-colors hover:bg-[color-mix(in_srgb,var(--p-primary-color)_11%,white)]\"\n                      [class.bg-[color-mix(in_srgb,var(--p-primary-color)_11%,white)]]=\"\n                        mentionActiveIndex() === i\n                      \"\n                      (click)=\"selectMention(candidate)\"\n                    >\n                      <span\n                        class=\"mt-px inline-flex h-6 w-6 shrink-0 items-center justify-center rounded-full border border-[color-mix(in_srgb,var(--p-primary-color)_18%,transparent)] bg-[color-mix(in_srgb,var(--p-primary-color)_16%,white)] text-[0.7rem] font-bold text-[color-mix(in_srgb,var(--p-primary-color)_74%,black)]\"\n                      >\n                        {{ getMentionAvatarText(candidate) }}\n                      </span>\n                      <span class=\"flex min-w-0 flex-1 flex-col gap-0.5\">\n                        <span\n                          class=\"text-[0.79rem] leading-[1.25] font-semibold text-surface-900\"\n                          >{{\n                            candidate.displayName ||\n                              candidate.userName ||\n                              candidate.userId\n                          }}</span\n                        >\n                        <span\n                          class=\"inline-flex items-center text-[0.73rem] leading-[1.2] text-surface-500\"\n                        >\n                          @{{ candidate.userId }}\n                        </span>\n                      </span>\n                    </button>\n                  }\n                }\n              </div>\n            }\n          </div>\n\n          @if (composerAttachments().length > 0) {\n            <div class=\"mt-2 flex flex-wrap gap-2 px-1\">\n              @for (attachment of composerAttachments(); track attachment.id) {\n                <div\n                  class=\"rounded-xl border border-surface-200 bg-surface-50 px-2 py-1 text-xs\"\n                >\n                  <div class=\"flex items-center gap-2\">\n                    <span class=\"max-w-[12rem] truncate\">{{\n                      attachment.fileName\n                    }}</span>\n                    @if (attachment.status === \"uploading\") {\n                      <span class=\"text-surface-500\"\n                        >{{ attachment.progress }}%</span\n                      >\n                    } @else if (attachment.status === \"failed\") {\n                      <span class=\"text-red-600\">Failed</span>\n                    } @else {\n                      <span class=\"text-emerald-600\">Ready</span>\n                    }\n                    <button\n                      type=\"button\"\n                      class=\"rounded-lg bg-transparent px-2 py-1 text-[0.72rem] font-semibold leading-none text-surface-600 transition-colors hover:bg-[color-mix(in_srgb,var(--p-primary-color)_10%,white)] hover:text-[color-mix(in_srgb,var(--p-primary-color)_74%,black)] disabled:cursor-not-allowed disabled:opacity-55\"\n                      (click)=\"removeAttachment(attachment.id)\"\n                    >\n                      Remove\n                    </button>\n                  </div>\n                  @if (attachment.error) {\n                    <p class=\"text-[11px] text-red-600\">\n                      {{ attachment.error }}\n                    </p>\n                  }\n                </div>\n              }\n            </div>\n          }\n\n          <div\n            class=\"mt-2 flex flex-wrap items-center justify-between gap-2 border-t border-surface-200 px-1 pt-2\"\n          >\n            <div class=\"flex items-center gap-2 text-xs text-surface-500\">\n              <span>Type @ to mention people</span>\n              <span>&bull;</span>\n              <span>{{ composerText().length }}/10000</span>\n              @if (charactersLeft() < 0) {\n                <span class=\"font-semibold text-red-600\">Too long</span>\n              }\n            </div>\n\n            <div class=\"flex items-center gap-2\">\n              @if (allowAttachments()) {\n                <mt-button\n                  icon=\"file.paperclip\"\n                  label=\"Attach\"\n                  size=\"small\"\n                  [outlined]=\"true\"\n                  [disabled]=\"disabled() || posting()\"\n                  (onClick)=\"browseAttachments()\"\n                />\n              }\n              <mt-button\n                icon=\"communication.send-01\"\n                [label]=\"posting() ? 'Sending...' : 'Send'\"\n                size=\"small\"\n                [loading]=\"posting()\"\n                [disabled]=\"!canSend()\"\n                (onClick)=\"sendComment()\"\n              />\n            </div>\n          </div>\n        </div>\n      </footer>\n    </div>\n  </div>\n</mt-card>\n\n<p-dialog\n  [visible]=\"revisionsDialogVisible()\"\n  (visibleChange)=\"revisionsDialogVisible.set($event)\"\n  [modal]=\"true\"\n  [dismissableMask]=\"true\"\n  [draggable]=\"false\"\n  [resizable]=\"false\"\n  [style]=\"{ width: 'min(42rem, 92vw)' }\"\n  header=\"Comment history\"\n>\n  @if (revisionLoading()) {\n    <div class=\"space-y-2\">\n      @for (row of [1, 2, 3]; track row) {\n        <div class=\"h-12 animate-pulse rounded-xl bg-surface-100\"></div>\n      }\n    </div>\n  } @else if (visibleRevisions().length === 0) {\n    <p class=\"text-sm text-surface-500\">No revision snapshots.</p>\n  } @else {\n    <div class=\"max-h-[55vh] space-y-2 overflow-y-auto pr-1\">\n      @for (revision of visibleRevisions(); track revision.id) {\n        <article class=\"rounded-xl border border-surface-200 p-3\">\n          <div class=\"mb-1 text-xs text-surface-500\">\n            Revision #{{ revision.revisionNumber }} &bull;\n            {{ revision.createdAt | date: \"MMM d, y h:mm a\" }} &bull;\n            {{ revision.createdBy }}\n          </div>\n          <div class=\"whitespace-pre-wrap break-words text-sm leading-6\">\n            @for (\n              segment of getCommentSegments({\n                id: revision.id,\n                moduleType: selectedRevisionComment()?.moduleType || \"\",\n                recordId: selectedRevisionComment()?.recordId || 0,\n                parentCommentId: null,\n                comment: revision.comment,\n                isSystem: false,\n                createdAt: revision.createdAt,\n                updatedAt: null,\n                createdBy: revision.createdBy,\n                updatedBy: null,\n                attachments: [],\n                mentions: revision.mentions,\n              });\n              track $index\n            ) {\n              <span\n                [ngClass]=\"\n                  segment.isMention\n                    ? 'rounded-sm bg-primary-50 px-0.5 font-semibold text-primary-700'\n                    : ''\n                \"\n                >{{ segment.text }}</span\n              >\n            }\n          </div>\n        </article>\n      }\n    </div>\n  }\n</p-dialog>\n", styles: [":host{display:block;height:100%;min-height:0}:host ::ng-deep .mt-discussion-card>div{display:flex;flex-direction:column;height:100%;min-height:0}:host ::ng-deep .mt-discussion-card>div>div.flex-1{display:flex;flex-direction:column;min-height:0;overflow:hidden}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: DialogModule }, { kind: "component", type: i3.Dialog, selector: "p-dialog", inputs: ["hostName", "header", "draggable", "resizable", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "breakpoints", "styleClass", "maskStyleClass", "maskStyle", "showHeader", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "maskMotionOptions", "motionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "closeButtonProps", "maximizeButtonProps", "visible", "style", "position", "role", "appendTo", "content", "contentTemplate", "footerTemplate", "closeIconTemplate", "maximizeIconTemplate", "minimizeIconTemplate", "headlessTemplate"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }, { kind: "component", type: Button, selector: "mt-button", inputs: ["icon", "label", "tooltip", "class", "type", "styleClass", "severity", "badge", "variant", "badgeSeverity", "size", "iconPos", "autofocus", "fluid", "raised", "rounded", "text", "plain", "outlined", "link", "disabled", "loading", "pInputs"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: Card, selector: "mt-card", inputs: ["class", "title", "paddingless"] }, { kind: "component", type: EntitiesPreview, selector: "mt-entities-preview", inputs: ["entities"] }, { kind: "pipe", type: i1.DecimalPipe, name: "number" }, { kind: "pipe", type: i1.DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: DiscussionThread, decorators: [{
+            type: Component,
+            args: [{ selector: 'mt-discussion-thread', standalone: true, imports: [
+                        CommonModule,
+                        FormsModule,
+                        DatePipe,
+                        DialogModule,
+                        Button,
+                        Card,
+                        EntitiesPreview,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        class: 'block h-full min-h-0',
+                    }, template: "<mt-card\n  class=\"mt-discussion-card h-full min-h-0 w-full overflow-hidden shadow-sm\"\n  [paddingless]=\"true\"\n  [ngClass]=\"styleClass()\"\n>\n  <div class=\"flex h-full min-h-0 flex-col overflow-hidden\">\n    <input\n      #attachmentInput\n      type=\"file\"\n      class=\"hidden\"\n      multiple\n      (change)=\"onAttachmentSelected($event)\"\n    />\n\n    <header\n      class=\"flex flex-wrap items-start justify-between gap-3 border-b border-surface-200 px-4 py-3\"\n    >\n      <div class=\"min-w-0\">\n        <h3 class=\"truncate text-sm font-semibold uppercase tracking-[0.08em]\">\n          {{ title() }}\n        </h3>\n        @if (subtitle()) {\n          <p class=\"mt-1 text-xs text-surface-500\">{{ subtitle() }}</p>\n        }\n        <p class=\"mt-1 text-xs text-surface-500\">\n          {{ threadKey() || \"Discussion\" }}\n        </p>\n      </div>\n\n      <div class=\"flex flex-wrap items-center gap-2\">\n        @if (unreadCount() > 0) {\n          <span\n            class=\"inline-flex items-center rounded-full bg-red-100 px-2 py-0.5 text-xs font-semibold text-red-700\"\n          >\n            {{ unreadCount() }} unread\n          </span>\n        } @else {\n          <span\n            class=\"inline-flex items-center rounded-full bg-emerald-100 px-2 py-0.5 text-xs font-semibold text-emerald-700\"\n          >\n            Up to date\n          </span>\n        }\n\n        <mt-button\n          icon=\"arrow.refresh-cw-01\"\n          [label]=\"refreshing() ? 'Refreshing...' : 'Refresh'\"\n          size=\"small\"\n          [outlined]=\"true\"\n          [loading]=\"refreshing()\"\n          [disabled]=\"loadingInitial()\"\n          (onClick)=\"refreshThread()\"\n        />\n        <mt-button\n          icon=\"general.check\"\n          label=\"Mark read\"\n          size=\"small\"\n          [outlined]=\"true\"\n          [disabled]=\"markingRead() || !hasUnread()\"\n          (onClick)=\"markRead()\"\n        />\n        <mt-button\n          icon=\"communication.mail-01\"\n          label=\"Mark unread\"\n          size=\"small\"\n          [outlined]=\"true\"\n          [disabled]=\"markingRead()\"\n          (onClick)=\"markUnread()\"\n        />\n        @if (showParticipants()) {\n          <mt-button\n            icon=\"user.users-01\"\n            [label]=\"'Participants (' + participants().length + ')'\"\n            size=\"small\"\n            [outlined]=\"true\"\n            (onClick)=\"toggleParticipantsPanel()\"\n          />\n        }\n      </div>\n    </header>\n\n    @if (showParticipants() && participantsExpanded()) {\n      <section class=\"border-b border-surface-200 px-4 py-3\">\n        @if (participantsLoading()) {\n          <span class=\"text-xs text-surface-500\">Loading participants...</span>\n        } @else if (participantEntities().length === 0) {\n          <span class=\"text-xs text-surface-500\">No participants yet.</span>\n        } @else {\n          <div class=\"max-h-48 overflow-y-auto pr-1\">\n            <mt-entities-preview [entities]=\"participantEntities()\" />\n          </div>\n        }\n      </section>\n    }\n\n    @if (errorMessage(); as error) {\n      <div\n        class=\"border-b border-red-200 bg-red-50 px-4 py-2 text-sm text-red-700\"\n      >\n        {{ error }}\n      </div>\n    }\n\n    <div class=\"flex min-h-0 flex-1 flex-col overflow-hidden\">\n      <div\n        #viewport\n        class=\"min-h-0 flex-1 space-y-3 overflow-y-auto overscroll-contain px-3 py-3\"\n        (scroll)=\"onViewportScroll()\"\n      >\n        @if (hasMore()) {\n          <div class=\"flex justify-center py-1\">\n            <mt-button\n              icon=\"arrow.chevron-up\"\n              [label]=\"loadingMore() ? 'Loading...' : 'Load older messages'\"\n              size=\"small\"\n              [outlined]=\"true\"\n              [loading]=\"loadingMore()\"\n              (onClick)=\"loadOlder()\"\n            />\n          </div>\n        }\n\n        @if (loadingInitial()) {\n          <div class=\"space-y-2\">\n            @for (item of [1, 2, 3, 4]; track item) {\n              <div class=\"h-16 animate-pulse rounded-xl bg-surface-100\"></div>\n            }\n          </div>\n        } @else if (commentsAsc().length === 0) {\n          <div\n            class=\"rounded-2xl border border-dashed border-surface-300 p-8 text-center\"\n          >\n            <h4 class=\"text-sm font-semibold text-surface-700\">\n              No comments yet\n            </h4>\n            <p class=\"mt-1 text-xs text-surface-500\">Start the conversation.</p>\n          </div>\n        } @else {\n          @for (comment of commentsAsc(); track trackComment($index, comment)) {\n            @if (firstUnreadCommentId() === comment.id) {\n              <div class=\"my-1 flex items-center justify-center gap-2\">\n                <span\n                  class=\"flex-1 border-t border-dashed border-red-300\"\n                ></span>\n                <span\n                  class=\"rounded-full border border-red-200 bg-red-50 px-2 py-0.5 text-[0.67rem] font-bold leading-none text-red-700\"\n                  >Unread messages</span\n                >\n                <span\n                  class=\"flex-1 border-t border-dashed border-red-300\"\n                ></span>\n              </div>\n            }\n\n            <article\n              class=\"group flex gap-2\"\n              [class.justify-end]=\"isOwnComment(comment)\"\n            >\n              @if (!isOwnComment(comment)) {\n                <div\n                  class=\"mt-0.5 inline-flex h-[1.9rem] w-[1.9rem] shrink-0 items-center justify-center rounded-full border border-[color-mix(in_srgb,var(--p-primary-color)_20%,transparent)] bg-[color-mix(in_srgb,var(--p-primary-color)_16%,white)] text-[0.74rem] font-bold text-[color-mix(in_srgb,var(--p-primary-color)_75%,black)]\"\n                >\n                  {{ getAvatarText(comment) }}\n                </div>\n              }\n\n              <div\n                class=\"max-w-[88%] min-w-[16rem] rounded-2xl border border-surface-200 px-3 py-2\"\n                [class.bg-[color-mix(in_srgb,var(--p-primary-color)_7%,white)]]=\"\n                  isOwnComment(comment)\n                \"\n              >\n                <div\n                  class=\"mb-1 flex flex-wrap items-center justify-between gap-2\"\n                >\n                  <div class=\"text-xs text-surface-600\">\n                    <span class=\"font-semibold text-surface-900\">{{\n                      comment.createdBy\n                    }}</span>\n                    <span class=\"mx-1\">&bull;</span>\n                    <span>{{\n                      comment.createdAt | date: \"MMM d, y h:mm a\"\n                    }}</span>\n                    @if (comment.updatedAt) {\n                      <span class=\"ml-1 text-[11px] text-surface-500\"\n                        >(edited)</span\n                      >\n                    }\n                  </div>\n                </div>\n\n                @if (getParentComment(comment); as parentComment) {\n                  <button\n                    type=\"button\"\n                    class=\"mb-2 block w-full rounded-xl border border-surface-200 bg-surface-50 px-2 py-1 text-left text-xs text-surface-600\"\n                    (click)=\"openReply(parentComment)\"\n                  >\n                    <span class=\"font-semibold\">{{\n                      parentComment.createdBy\n                    }}</span>\n                    <span class=\"mx-1\">:</span>\n                    <span class=\"line-clamp-1\">{{\n                      parentComment.comment\n                    }}</span>\n                  </button>\n                }\n\n                @if (editingCommentId() === comment.id) {\n                  <div class=\"relative\">\n                    <textarea\n                      rows=\"3\"\n                      class=\"w-full min-h-[5.25rem] resize-y rounded-2xl border border-surface-300 bg-white px-3 py-2.5 text-[0.86rem] leading-[1.45] text-surface-900 outline-none focus-visible:outline-2 focus-visible:outline-[color-mix(in_srgb,var(--p-primary-color)_32%,transparent)] focus-visible:outline-offset-1\"\n                      [ngModel]=\"editText()\"\n                      (ngModelChange)=\"editText.set($event)\"\n                      (input)=\"onEditInput($event)\"\n                      (keyup)=\"onEditCaretEvent($event)\"\n                      (click)=\"onEditCaretEvent($event)\"\n                      (scroll)=\"onEditCaretEvent($event)\"\n                      (keydown)=\"onEditKeydown($event)\"\n                    ></textarea>\n\n                    @if (\n                      mentionSession()?.mode === \"edit\" &&\n                      mentionSession()?.editCommentId === comment.id\n                    ) {\n                      <div\n                        class=\"absolute top-0 left-0 z-20 min-w-56 overflow-auto rounded-xl border border-surface-300 bg-white shadow-[0_10px_40px_color-mix(in_srgb,black_14%,transparent)]\"\n                        [ngStyle]=\"mentionMenuStyle()\"\n                        [class.origin-bottom-left]=\"\n                          mentionMenuPosition()?.placement === 'above'\n                        \"\n                      >\n                        @if (mentionLoading()) {\n                          <div class=\"px-3 py-2 text-xs text-surface-500\">\n                            Searching...\n                          </div>\n                        } @else if (mentionCandidates().length === 0) {\n                          <div class=\"px-3 py-2 text-xs text-surface-500\">\n                            No matches\n                          </div>\n                        } @else {\n                          @for (\n                            candidate of mentionCandidates();\n                            track candidate.userId;\n                            let i = $index\n                          ) {\n                            <button\n                              type=\"button\"\n                              class=\"flex w-full cursor-pointer items-start gap-2 bg-transparent px-2.5 py-2 text-left text-[0.78rem] transition-colors hover:bg-[color-mix(in_srgb,var(--p-primary-color)_11%,white)]\"\n                              [class.bg-[color-mix(in_srgb,var(--p-primary-color)_11%,white)]]=\"\n                                mentionActiveIndex() === i\n                              \"\n                              (click)=\"selectMention(candidate)\"\n                            >\n                              <span\n                                class=\"mt-px inline-flex h-6 w-6 shrink-0 items-center justify-center rounded-full border border-[color-mix(in_srgb,var(--p-primary-color)_18%,transparent)] bg-[color-mix(in_srgb,var(--p-primary-color)_16%,white)] text-[0.7rem] font-bold text-[color-mix(in_srgb,var(--p-primary-color)_74%,black)]\"\n                              >\n                                {{ getMentionAvatarText(candidate) }}\n                              </span>\n                              <span\n                                class=\"flex min-w-0 flex-1 flex-col gap-0.5\"\n                              >\n                                <span\n                                  class=\"text-[0.79rem] leading-[1.25] font-semibold text-surface-900\"\n                                  >{{\n                                    candidate.displayName ||\n                                      candidate.userName ||\n                                      candidate.userId\n                                  }}</span\n                                >\n                                <span\n                                  class=\"inline-flex items-center text-[0.73rem] leading-[1.2] text-surface-500\"\n                                >\n                                  @{{ candidate.userId }}\n                                </span>\n                              </span>\n                            </button>\n                          }\n                        }\n                      </div>\n                    }\n                  </div>\n\n                  <div\n                    class=\"mt-2 flex flex-wrap items-center justify-between gap-2\"\n                  >\n                    <span class=\"text-xs text-surface-500\"\n                      >{{ editText().length }}/10000</span\n                    >\n                    <div class=\"flex items-center gap-2\">\n                      <button\n                        type=\"button\"\n                        class=\"rounded-[0.65rem] border border-surface-300 bg-transparent px-3 py-2 text-xs font-semibold leading-none text-surface-700 transition-colors hover:border-[color-mix(in_srgb,var(--p-primary-color)_24%,transparent)] hover:bg-[color-mix(in_srgb,var(--p-primary-color)_8%,white)] hover:text-[color-mix(in_srgb,var(--p-primary-color)_74%,black)] disabled:cursor-not-allowed disabled:opacity-55\"\n                        (click)=\"cancelEdit()\"\n                      >\n                        Cancel\n                      </button>\n                      <button\n                        type=\"button\"\n                        class=\"rounded-[0.65rem] border border-[color-mix(in_srgb,var(--p-primary-color)_26%,transparent)] bg-[color-mix(in_srgb,var(--p-primary-color)_12%,white)] px-3 py-2 text-xs font-bold leading-none text-[color-mix(in_srgb,var(--p-primary-color)_76%,black)] transition-colors hover:bg-[color-mix(in_srgb,var(--p-primary-color)_17%,white)] disabled:cursor-not-allowed disabled:opacity-55\"\n                        [disabled]=\"!canSaveEdit()\"\n                        (click)=\"saveEdit()\"\n                      >\n                        {{ savingEdit() ? \"Saving...\" : \"Save\" }}\n                      </button>\n                    </div>\n                  </div>\n                } @else {\n                  <div\n                    class=\"whitespace-pre-wrap break-words text-sm leading-6\"\n                  >\n                    @for (\n                      segment of getCommentSegments(comment);\n                      track $index\n                    ) {\n                      <span\n                        [ngClass]=\"\n                          segment.isMention\n                            ? 'rounded-sm bg-primary-50 px-0.5 font-semibold text-primary-700'\n                            : ''\n                        \"\n                        [attr.data-user-id]=\"segment.userId || null\"\n                      >\n                        {{ segment.text }}\n                      </span>\n                    }\n                  </div>\n\n                  @if (comment.attachments.length > 0) {\n                    <div class=\"mt-2 flex flex-wrap gap-2\">\n                      @for (\n                        attachment of comment.attachments;\n                        track attachment.id\n                      ) {\n                        <button\n                          type=\"button\"\n                          class=\"inline-flex max-w-full items-center gap-1.5 rounded-lg border border-surface-300 px-2 py-1 text-[0.72rem] hover:bg-surface-50\"\n                          (click)=\"downloadAttachment(comment, attachment)\"\n                        >\n                          <span class=\"truncate\">{{\n                            attachment.fileName\n                          }}</span>\n                          <span class=\"text-[11px] text-surface-500\"\n                            >({{ attachment.size | number }} bytes)</span\n                          >\n                        </button>\n                      }\n                    </div>\n                  }\n\n                  <div\n                    class=\"mt-2 flex flex-wrap items-center gap-1 opacity-100 md:opacity-0 md:group-hover:opacity-100\"\n                  >\n                    <button\n                      type=\"button\"\n                      class=\"rounded-lg bg-transparent px-2 py-1 text-[0.72rem] font-semibold leading-none text-surface-600 transition-colors hover:bg-[color-mix(in_srgb,var(--p-primary-color)_10%,white)] hover:text-[color-mix(in_srgb,var(--p-primary-color)_74%,black)] disabled:cursor-not-allowed disabled:opacity-55\"\n                      (click)=\"openReply(comment)\"\n                    >\n                      Reply\n                    </button>\n                    @if (canEditComment(comment)) {\n                      <button\n                        type=\"button\"\n                        class=\"rounded-lg bg-transparent px-2 py-1 text-[0.72rem] font-semibold leading-none text-surface-600 transition-colors hover:bg-[color-mix(in_srgb,var(--p-primary-color)_10%,white)] hover:text-[color-mix(in_srgb,var(--p-primary-color)_74%,black)] disabled:cursor-not-allowed disabled:opacity-55\"\n                        (click)=\"startEdit(comment)\"\n                      >\n                        Edit\n                      </button>\n                    }\n                    @if (canDeleteComment(comment)) {\n                      <button\n                        type=\"button\"\n                        class=\"rounded-lg bg-transparent px-2 py-1 text-[0.72rem] font-semibold leading-none text-red-600 transition-colors hover:bg-[color-mix(in_srgb,var(--p-primary-color)_10%,white)] disabled:cursor-not-allowed disabled:opacity-55\"\n                        [disabled]=\"isDeleting(comment.id)\"\n                        (click)=\"deleteComment(comment)\"\n                      >\n                        {{ isDeleting(comment.id) ? \"Deleting...\" : \"Delete\" }}\n                      </button>\n                    }\n                    @if (comment.updatedAt) {\n                      <button\n                        type=\"button\"\n                        class=\"rounded-lg bg-transparent px-2 py-1 text-[0.72rem] font-semibold leading-none text-surface-600 transition-colors hover:bg-[color-mix(in_srgb,var(--p-primary-color)_10%,white)] hover:text-[color-mix(in_srgb,var(--p-primary-color)_74%,black)] disabled:cursor-not-allowed disabled:opacity-55\"\n                        (click)=\"openRevisions(comment)\"\n                      >\n                        History\n                      </button>\n                    }\n                  </div>\n                }\n              </div>\n\n              @if (isOwnComment(comment)) {\n                <div\n                  class=\"mt-0.5 inline-flex h-[1.9rem] w-[1.9rem] shrink-0 items-center justify-center rounded-full border border-[color-mix(in_srgb,var(--p-primary-color)_20%,transparent)] bg-[color-mix(in_srgb,var(--p-primary-color)_16%,white)] text-[0.74rem] font-bold text-[color-mix(in_srgb,var(--p-primary-color)_75%,black)]\"\n                >\n                  {{ getAvatarText(comment) }}\n                </div>\n              }\n            </article>\n          }\n        }\n      </div>\n\n      <footer\n        class=\"z-10 shrink-0 border-t border-surface-200 bg-content px-3 py-3\"\n      >\n        @if (replyToComment(); as replyComment) {\n          <div\n            class=\"mb-2 flex items-center justify-between rounded-xl border border-surface-200 bg-surface-50 px-2 py-1\"\n          >\n            <div class=\"min-w-0 text-xs text-surface-600\">\n              <span class=\"font-semibold\"\n                >Replying to {{ replyComment.createdBy }}</span\n              >\n              <p class=\"truncate\">{{ replyComment.comment }}</p>\n            </div>\n            <button\n              type=\"button\"\n              class=\"rounded-lg bg-transparent px-2 py-1 text-[0.72rem] font-semibold leading-none text-surface-600 transition-colors hover:bg-[color-mix(in_srgb,var(--p-primary-color)_10%,white)] hover:text-[color-mix(in_srgb,var(--p-primary-color)_74%,black)] disabled:cursor-not-allowed disabled:opacity-55\"\n              (click)=\"clearReply()\"\n            >\n              Cancel\n            </button>\n          </div>\n        }\n\n        <div\n          class=\"rounded-2xl border border-surface-300 bg-white p-2 shadow-sm\"\n        >\n          <div class=\"relative\">\n            <textarea\n              #composerInput\n              rows=\"3\"\n              class=\"w-full min-h-[5.5rem] resize-y border-0 bg-transparent px-2 py-1 text-[0.9rem] leading-[1.45] text-surface-900 outline-none\"\n              [disabled]=\"disabled() || posting()\"\n              [ngModel]=\"composerText()\"\n              (ngModelChange)=\"composerText.set($event)\"\n              (input)=\"onComposerInput($event)\"\n              (keyup)=\"onComposerCaretEvent($event)\"\n              (click)=\"onComposerCaretEvent($event)\"\n              (scroll)=\"onComposerCaretEvent($event)\"\n              (keydown)=\"onComposerKeydown($event)\"\n              [placeholder]=\"placeholder()\"\n            ></textarea>\n\n            @if (mentionSession()?.mode === \"composer\") {\n              <div\n                class=\"absolute top-0 left-0 z-30 min-w-56 overflow-auto rounded-xl border border-surface-300 bg-white shadow-[0_10px_40px_color-mix(in_srgb,black_14%,transparent)]\"\n                [ngStyle]=\"mentionMenuStyle()\"\n                [class.origin-bottom-left]=\"\n                  mentionMenuPosition()?.placement === 'above'\n                \"\n              >\n                @if (mentionLoading()) {\n                  <div class=\"px-3 py-2 text-xs text-surface-500\">\n                    Searching...\n                  </div>\n                } @else if (mentionCandidates().length === 0) {\n                  <div class=\"px-3 py-2 text-xs text-surface-500\">\n                    No matches\n                  </div>\n                } @else {\n                  @for (\n                    candidate of mentionCandidates();\n                    track candidate.userId;\n                    let i = $index\n                  ) {\n                    <button\n                      type=\"button\"\n                      class=\"flex w-full cursor-pointer items-start gap-2 bg-transparent px-2.5 py-2 text-left text-[0.78rem] transition-colors hover:bg-[color-mix(in_srgb,var(--p-primary-color)_11%,white)]\"\n                      [class.bg-[color-mix(in_srgb,var(--p-primary-color)_11%,white)]]=\"\n                        mentionActiveIndex() === i\n                      \"\n                      (click)=\"selectMention(candidate)\"\n                    >\n                      <span\n                        class=\"mt-px inline-flex h-6 w-6 shrink-0 items-center justify-center rounded-full border border-[color-mix(in_srgb,var(--p-primary-color)_18%,transparent)] bg-[color-mix(in_srgb,var(--p-primary-color)_16%,white)] text-[0.7rem] font-bold text-[color-mix(in_srgb,var(--p-primary-color)_74%,black)]\"\n                      >\n                        {{ getMentionAvatarText(candidate) }}\n                      </span>\n                      <span class=\"flex min-w-0 flex-1 flex-col gap-0.5\">\n                        <span\n                          class=\"text-[0.79rem] leading-[1.25] font-semibold text-surface-900\"\n                          >{{\n                            candidate.displayName ||\n                              candidate.userName ||\n                              candidate.userId\n                          }}</span\n                        >\n                        <span\n                          class=\"inline-flex items-center text-[0.73rem] leading-[1.2] text-surface-500\"\n                        >\n                          @{{ candidate.userId }}\n                        </span>\n                      </span>\n                    </button>\n                  }\n                }\n              </div>\n            }\n          </div>\n\n          @if (composerAttachments().length > 0) {\n            <div class=\"mt-2 flex flex-wrap gap-2 px-1\">\n              @for (attachment of composerAttachments(); track attachment.id) {\n                <div\n                  class=\"rounded-xl border border-surface-200 bg-surface-50 px-2 py-1 text-xs\"\n                >\n                  <div class=\"flex items-center gap-2\">\n                    <span class=\"max-w-[12rem] truncate\">{{\n                      attachment.fileName\n                    }}</span>\n                    @if (attachment.status === \"uploading\") {\n                      <span class=\"text-surface-500\"\n                        >{{ attachment.progress }}%</span\n                      >\n                    } @else if (attachment.status === \"failed\") {\n                      <span class=\"text-red-600\">Failed</span>\n                    } @else {\n                      <span class=\"text-emerald-600\">Ready</span>\n                    }\n                    <button\n                      type=\"button\"\n                      class=\"rounded-lg bg-transparent px-2 py-1 text-[0.72rem] font-semibold leading-none text-surface-600 transition-colors hover:bg-[color-mix(in_srgb,var(--p-primary-color)_10%,white)] hover:text-[color-mix(in_srgb,var(--p-primary-color)_74%,black)] disabled:cursor-not-allowed disabled:opacity-55\"\n                      (click)=\"removeAttachment(attachment.id)\"\n                    >\n                      Remove\n                    </button>\n                  </div>\n                  @if (attachment.error) {\n                    <p class=\"text-[11px] text-red-600\">\n                      {{ attachment.error }}\n                    </p>\n                  }\n                </div>\n              }\n            </div>\n          }\n\n          <div\n            class=\"mt-2 flex flex-wrap items-center justify-between gap-2 border-t border-surface-200 px-1 pt-2\"\n          >\n            <div class=\"flex items-center gap-2 text-xs text-surface-500\">\n              <span>Type @ to mention people</span>\n              <span>&bull;</span>\n              <span>{{ composerText().length }}/10000</span>\n              @if (charactersLeft() < 0) {\n                <span class=\"font-semibold text-red-600\">Too long</span>\n              }\n            </div>\n\n            <div class=\"flex items-center gap-2\">\n              @if (allowAttachments()) {\n                <mt-button\n                  icon=\"file.paperclip\"\n                  label=\"Attach\"\n                  size=\"small\"\n                  [outlined]=\"true\"\n                  [disabled]=\"disabled() || posting()\"\n                  (onClick)=\"browseAttachments()\"\n                />\n              }\n              <mt-button\n                icon=\"communication.send-01\"\n                [label]=\"posting() ? 'Sending...' : 'Send'\"\n                size=\"small\"\n                [loading]=\"posting()\"\n                [disabled]=\"!canSend()\"\n                (onClick)=\"sendComment()\"\n              />\n            </div>\n          </div>\n        </div>\n      </footer>\n    </div>\n  </div>\n</mt-card>\n\n<p-dialog\n  [visible]=\"revisionsDialogVisible()\"\n  (visibleChange)=\"revisionsDialogVisible.set($event)\"\n  [modal]=\"true\"\n  [dismissableMask]=\"true\"\n  [draggable]=\"false\"\n  [resizable]=\"false\"\n  [style]=\"{ width: 'min(42rem, 92vw)' }\"\n  header=\"Comment history\"\n>\n  @if (revisionLoading()) {\n    <div class=\"space-y-2\">\n      @for (row of [1, 2, 3]; track row) {\n        <div class=\"h-12 animate-pulse rounded-xl bg-surface-100\"></div>\n      }\n    </div>\n  } @else if (visibleRevisions().length === 0) {\n    <p class=\"text-sm text-surface-500\">No revision snapshots.</p>\n  } @else {\n    <div class=\"max-h-[55vh] space-y-2 overflow-y-auto pr-1\">\n      @for (revision of visibleRevisions(); track revision.id) {\n        <article class=\"rounded-xl border border-surface-200 p-3\">\n          <div class=\"mb-1 text-xs text-surface-500\">\n            Revision #{{ revision.revisionNumber }} &bull;\n            {{ revision.createdAt | date: \"MMM d, y h:mm a\" }} &bull;\n            {{ revision.createdBy }}\n          </div>\n          <div class=\"whitespace-pre-wrap break-words text-sm leading-6\">\n            @for (\n              segment of getCommentSegments({\n                id: revision.id,\n                moduleType: selectedRevisionComment()?.moduleType || \"\",\n                recordId: selectedRevisionComment()?.recordId || 0,\n                parentCommentId: null,\n                comment: revision.comment,\n                isSystem: false,\n                createdAt: revision.createdAt,\n                updatedAt: null,\n                createdBy: revision.createdBy,\n                updatedBy: null,\n                attachments: [],\n                mentions: revision.mentions,\n              });\n              track $index\n            ) {\n              <span\n                [ngClass]=\"\n                  segment.isMention\n                    ? 'rounded-sm bg-primary-50 px-0.5 font-semibold text-primary-700'\n                    : ''\n                \"\n                >{{ segment.text }}</span\n              >\n            }\n          </div>\n        </article>\n      }\n    </div>\n  }\n</p-dialog>\n", styles: [":host{display:block;height:100%;min-height:0}:host ::ng-deep .mt-discussion-card>div{display:flex;flex-direction:column;height:100%;min-height:0}:host ::ng-deep .mt-discussion-card>div>div.flex-1{display:flex;flex-direction:column;min-height:0;overflow:hidden}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { moduleType: [{ type: i0.Input, args: [{ isSignal: true, alias: "moduleType", required: true }] }], recordId: [{ type: i0.Input, args: [{ isSignal: true, alias: "recordId", required: true }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], subtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtitle", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }], currentUserId: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentUserId", required: false }] }], requestContext: [{ type: i0.Input, args: [{ isSignal: true, alias: "requestContext", required: false }] }], mentionableUsers: [{ type: i0.Input, args: [{ isSignal: true, alias: "mentionableUsers", required: false }] }], mentionSearchEndpoint: [{ type: i0.Input, args: [{ isSignal: true, alias: "mentionSearchEndpoint", required: false }] }], mentionSearchParam: [{ type: i0.Input, args: [{ isSignal: true, alias: "mentionSearchParam", required: false }] }], mentionSearchDataPath: [{ type: i0.Input, args: [{ isSignal: true, alias: "mentionSearchDataPath", required: false }] }], allowAttachments: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowAttachments", required: false }] }], uploadEndpoint: [{ type: i0.Input, args: [{ isSignal: true, alias: "uploadEndpoint", required: false }] }], attachmentDownloadEndpoint: [{ type: i0.Input, args: [{ isSignal: true, alias: "attachmentDownloadEndpoint", required: false }] }], showParticipants: [{ type: i0.Input, args: [{ isSignal: true, alias: "showParticipants", required: false }] }], autoMarkRead: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoMarkRead", required: false }] }], refreshIntervalMs: [{ type: i0.Input, args: [{ isSignal: true, alias: "refreshIntervalMs", required: false }] }], styleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "styleClass", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], loaded: [{ type: i0.Output, args: ["loaded"] }], errored: [{ type: i0.Output, args: ["errored"] }], commentCreated: [{ type: i0.Output, args: ["commentCreated"] }], commentUpdated: [{ type: i0.Output, args: ["commentUpdated"] }], commentDeleted: [{ type: i0.Output, args: ["commentDeleted"] }], readStateChanged: [{ type: i0.Output, args: ["readStateChanged"] }], viewportRef: [{ type: i0.ViewChild, args: ['viewport', { isSignal: true }] }], composerInputRef: [{ type: i0.ViewChild, args: ['composerInput', { isSignal: true }] }], attachmentInputRef: [{ type: i0.ViewChild, args: ['attachmentInput', { isSignal: true }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { DiscussionApiService, DiscussionThread };
+//# sourceMappingURL=masterteam-discussion.mjs.map