@memberjunction/ng-conversations 5.43.0 → 5.45.0

package/dist/lib/components/mention/mention-editor.component.js

@@ -1,1233 +0,0 @@
-import { Component, Input, Output, EventEmitter, ViewChild, forwardRef } from '@angular/core';
-import { NG_VALUE_ACCESSOR } from '@angular/forms';
-import { AIEngineBase } from '@memberjunction/ai-engine-base';
-import { UUIDsEqual } from '@memberjunction/global';
-import * as i0 from "@angular/core";
-import * as i1 from "../../services/mention-autocomplete.service";
-import * as i2 from "./mention-dropdown.component";
-const _c0 = ["editor"];
-function MentionEditorComponent_Conditional_1_For_2_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "img", 8);
-} if (rf & 2) {
-    const attachment_r3 = i0.ɵɵnextContext().$implicit;
-    i0.ɵɵproperty("src", attachment_r3.thumbnailUrl, i0.ɵɵsanitizeUrl)("alt", attachment_r3.fileName);
-} }
-function MentionEditorComponent_Conditional_1_For_2_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 9);
-    i0.ɵɵelement(1, "i", 12);
-    i0.ɵɵelementStart(2, "span", 13);
-    i0.ɵɵtext(3);
-    i0.ɵɵelementEnd()();
-} if (rf & 2) {
-    const attachment_r3 = i0.ɵɵnextContext().$implicit;
-    i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate(attachment_r3.fileName);
-} }
-function MentionEditorComponent_Conditional_1_For_2_Template(rf, ctx) { if (rf & 1) {
-    const _r2 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 7);
-    i0.ɵɵlistener("click", function MentionEditorComponent_Conditional_1_For_2_Template_div_click_0_listener() { const attachment_r3 = i0.ɵɵrestoreView(_r2).$implicit; const ctx_r3 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r3.onAttachmentClick(attachment_r3)); });
-    i0.ɵɵconditionalCreate(1, MentionEditorComponent_Conditional_1_For_2_Conditional_1_Template, 1, 2, "img", 8);
-    i0.ɵɵconditionalCreate(2, MentionEditorComponent_Conditional_1_For_2_Conditional_2_Template, 4, 1, "div", 9);
-    i0.ɵɵelementStart(3, "button", 10);
-    i0.ɵɵlistener("click", function MentionEditorComponent_Conditional_1_For_2_Template_button_click_3_listener($event) { const attachment_r3 = i0.ɵɵrestoreView(_r2).$implicit; const ctx_r3 = i0.ɵɵnextContext(2); ctx_r3.removeAttachment(attachment_r3.id); return i0.ɵɵresetView($event.stopPropagation()); });
-    i0.ɵɵelement(4, "i", 11);
-    i0.ɵɵelementEnd()();
-} if (rf & 2) {
-    const attachment_r3 = ctx.$implicit;
-    i0.ɵɵadvance();
-    i0.ɵɵconditional(attachment_r3.thumbnailUrl ? 1 : -1);
-    i0.ɵɵadvance();
-    i0.ɵɵconditional(!attachment_r3.thumbnailUrl ? 2 : -1);
-} }
-function MentionEditorComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 2);
-    i0.ɵɵrepeaterCreate(1, MentionEditorComponent_Conditional_1_For_2_Template, 5, 2, "div", 6, i0.ɵɵrepeaterTrackByIdentity);
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const ctx_r3 = i0.ɵɵnextContext();
-    i0.ɵɵadvance();
-    i0.ɵɵrepeater(ctx_r3.pendingAttachments);
-} }
-function MentionEditorComponent_Conditional_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 4)(1, "div", 14);
-    i0.ɵɵelement(2, "i", 15);
-    i0.ɵɵelementStart(3, "span");
-    i0.ɵɵtext(4, "Drop files here");
-    i0.ɵɵelementEnd()()();
-} }
-function MentionEditorComponent_Conditional_5_Template(rf, ctx) { if (rf & 1) {
-    const _r5 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "mj-mention-dropdown", 16);
-    i0.ɵɵlistener("suggestionSelected", function MentionEditorComponent_Conditional_5_Template_mj_mention_dropdown_suggestionSelected_0_listener($event) { i0.ɵɵrestoreView(_r5); const ctx_r3 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r3.onMentionSelected($event)); })("closed", function MentionEditorComponent_Conditional_5_Template_mj_mention_dropdown_closed_0_listener() { i0.ɵɵrestoreView(_r5); const ctx_r3 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r3.closeMentionDropdown()); });
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const ctx_r3 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("suggestions", ctx_r3.mentionSuggestions)("position", ctx_r3.mentionDropdownPosition)("showAbove", ctx_r3.mentionDropdownShowAbove)("useFixedPositioning", true)("visible", true);
-} }
-/**
- * ContentEditable-based mention editor with visual chips/pills
- * Provides Slack/Teams-style mention UX with immutable mention tokens
- */
-export class MentionEditorComponent {
-    mentionAutocomplete;
-    cdr;
-    editorRef;
-    placeholder = 'Type @ to mention agents or users, # for entities...';
-    disabled = false;
-    currentUser;
-    enableMentions = true;
-    // Attachment settings
-    enableAttachments = true;
-    maxAttachments = 10;
-    maxAttachmentSizeBytes = 20 * 1024 * 1024; // 20MB default
-    acceptedFileTypes = 'image/*'; // MIME types to accept
-    valueChange = new EventEmitter();
-    mentionSelected = new EventEmitter();
-    enterPressed = new EventEmitter();
-    attachmentsChanged = new EventEmitter();
-    attachmentError = new EventEmitter();
-    attachmentClicked = new EventEmitter();
-    // Pending attachments state
-    pendingAttachments = [];
-    isDragOver = false;
-    // Mention dropdown state
-    showMentionDropdown = false;
-    mentionSuggestions = [];
-    mentionDropdownPosition = { top: 0, left: 0 };
-    mentionDropdownShowAbove = false;
-    mentionStartIndex = -1;
-    mentionQuery = '';
-    /** Mention trigger characters: '@' for agents/users, '#' for entities */
-    static MENTION_TRIGGERS = ['@', '#'];
-    /** The trigger char that opened the current mention dropdown */
-    activeTrigger = '@';
-    onChange = () => { };
-    onTouched = () => { };
-    constructor(mentionAutocomplete, cdr) {
-        this.mentionAutocomplete = mentionAutocomplete;
-        this.cdr = cdr;
-    }
-    async ngOnInit() {
-        if (this.enableMentions && this.currentUser) {
-            await this.mentionAutocomplete.initialize(this.currentUser);
-        }
-    }
-    ngAfterViewInit() {
-        // Auto-focus the editor
-        setTimeout(() => {
-            this.editorRef?.nativeElement?.focus();
-        }, 100);
-    }
-    /**
-     * Handle clicks on the container - focus the editor if clicking outside the contentEditable
-     */
-    onContainerClick(event) {
-        const target = event.target;
-        const editor = this.editorRef?.nativeElement;
-        // Don't handle clicks on the dropdown or its children
-        if (target.closest('mj-mention-dropdown')) {
-            return;
-        }
-        // If clicking on container or any element that's not the editor itself, focus the editor
-        if (target !== editor && !editor?.contains(target)) {
-            editor?.focus();
-            // Move cursor to end of content
-            const selection = window.getSelection();
-            const range = document.createRange();
-            if (editor && selection) {
-                range.selectNodeContents(editor);
-                range.collapse(false); // Collapse to end
-                selection.removeAllRanges();
-                selection.addRange(range);
-            }
-        }
-    }
-    /**
-     * Handle input changes in contentEditable
-     */
-    onInput() {
-        const plainText = this.getPlainText();
-        this.onChange(plainText);
-        this.valueChange.emit(plainText);
-        // Handle @mention autocomplete
-        if (this.enableMentions && this.currentUser) {
-            this.handleMentionInput();
-        }
-    }
-    /**
-     * Handle blur event - close dropdown when editor loses focus
-     */
-    onBlur() {
-        // Call form control touched callback
-        this.onTouched();
-        // Close dropdown when editor loses focus
-        // Use setTimeout to allow mousedown events on dropdown to fire first
-        setTimeout(() => {
-            if (this.showMentionDropdown) {
-                this.closeMentionDropdown();
-            }
-        }, 200);
-    }
-    /**
-     * Handle paste event - images or plain text
-     */
-    onPaste(event) {
-        // Check for image data in clipboard
-        if (this.enableAttachments && event.clipboardData?.items) {
-            const items = Array.from(event.clipboardData.items);
-            const imageItems = items.filter(item => item.type.startsWith('image/'));
-            if (imageItems.length > 0) {
-                event.preventDefault();
-                // Process each image
-                for (const item of imageItems) {
-                    const file = item.getAsFile();
-                    if (file) {
-                        this.processFile(file);
-                    }
-                }
-                return;
-            }
-        }
-        // No images - handle as plain text
-        event.preventDefault();
-        // Get plain text from clipboard
-        const text = event.clipboardData?.getData('text/plain') || '';
-        if (!text)
-            return;
-        // Insert plain text at cursor position
-        const selection = window.getSelection();
-        if (!selection || selection.rangeCount === 0)
-            return;
-        const range = selection.getRangeAt(0);
-        range.deleteContents();
-        // Insert text as text node (not HTML)
-        const textNode = document.createTextNode(text);
-        range.insertNode(textNode);
-        // Move cursor to end of inserted text
-        range.setStartAfter(textNode);
-        range.collapse(true);
-        selection.removeAllRanges();
-        selection.addRange(range);
-        // Trigger input event to update model
-        this.onInput();
-    }
-    /**
-     * Handle keydown events
-     */
-    onKeyDown(event) {
-        // Enter alone: Send message (if dropdown not showing)
-        if (event.key === 'Enter' && !event.shiftKey && !this.showMentionDropdown) {
-            event.preventDefault();
-            const plainText = this.getPlainText();
-            this.enterPressed.emit(plainText);
-            return;
-        }
-        // Backspace: Check if deleting a mention chip
-        if (event.key === 'Backspace') {
-            this.handleBackspace(event);
-        }
-        // Handle mention dropdown navigation
-        if (this.showMentionDropdown) {
-            // Let the dropdown handle arrow keys, enter, escape
-            // (We'll pass these through to mention-dropdown component)
-        }
-    }
-    /**
-     * Handle @mention input detection
-     */
-    handleMentionInput() {
-        const selection = window.getSelection();
-        if (!selection || selection.rangeCount === 0)
-            return;
-        const range = selection.getRangeAt(0);
-        const textBeforeCursor = this.getTextBeforeCursor(range);
-        // Find the nearest mention trigger before the cursor
-        // ('@' for agents/users, '#' for entities) — whichever is closest wins
-        let triggerIndex = -1;
-        let triggerChar = '@';
-        for (const t of MentionEditorComponent.MENTION_TRIGGERS) {
-            const idx = textBeforeCursor.lastIndexOf(t);
-            if (idx > triggerIndex) {
-                triggerIndex = idx;
-                triggerChar = t;
-            }
-        }
-        if (triggerIndex === -1) {
-            this.closeMentionDropdown();
-            return;
-        }
-        // Check if there's a space between the trigger and cursor (means mention was completed)
-        const textAfterTrigger = textBeforeCursor.substring(triggerIndex + 1);
-        if (textAfterTrigger.includes(' ')) {
-            this.closeMentionDropdown();
-            return;
-        }
-        // Extract query
-        this.mentionQuery = textAfterTrigger;
-        this.mentionStartIndex = triggerIndex;
-        this.activeTrigger = triggerChar;
-        // Get suggestions for the active trigger
-        this.mentionSuggestions = this.mentionAutocomplete.getSuggestions(this.mentionQuery, !!this.currentUser, triggerChar);
-        if (this.mentionSuggestions.length > 0) {
-            this.showMentionDropdown = true;
-            this.positionMentionDropdown();
-        }
-        else {
-            this.closeMentionDropdown();
-        }
-    }
-    /**
-     * Get text before cursor position
-     */
-    getTextBeforeCursor(range) {
-        const tempRange = range.cloneRange();
-        tempRange.selectNodeContents(this.editorRef.nativeElement);
-        tempRange.setEnd(range.startContainer, range.startOffset);
-        return tempRange.toString();
-    }
-    /**
-     * Position the mention dropdown
-     */
-    positionMentionDropdown() {
-        const editor = this.editorRef?.nativeElement;
-        if (!editor)
-            return;
-        // Get the parent container (message-input-box-container) for alignment
-        const container = editor.closest('.message-input-box-container');
-        const containerRect = container?.getBoundingClientRect();
-        const selection = window.getSelection();
-        if (!selection || selection.rangeCount === 0)
-            return;
-        const range = selection.getRangeAt(0);
-        const cursorRect = range.getBoundingClientRect();
-        // Check space below vs above
-        const spaceBelow = window.innerHeight - cursorRect.bottom;
-        const spaceAbove = cursorRect.top;
-        const dropdownHeight = Math.min(this.mentionSuggestions.length * 56, 300);
-        this.mentionDropdownShowAbove = spaceBelow < dropdownHeight && spaceAbove > spaceBelow;
-        if (this.mentionDropdownShowAbove) {
-            // Position above, aligning with container top if possible
-            this.mentionDropdownPosition = {
-                top: containerRect ? containerRect.top + window.scrollY : cursorRect.top + window.scrollY - 4,
-                left: cursorRect.left + window.scrollX
-            };
-        }
-        else {
-            // Position below cursor, but align bottom edge with container top
-            this.mentionDropdownPosition = {
-                top: containerRect ? containerRect.top + window.scrollY : cursorRect.bottom + window.scrollY + 4,
-                left: cursorRect.left + window.scrollX
-            };
-        }
-    }
-    /**
-     * Handle mention selection from dropdown
-     */
-    onMentionSelected(suggestion) {
-        this.insertMentionChip(suggestion);
-        this.closeMentionDropdown();
-        this.mentionSelected.emit(suggestion);
-        // Refocus the editor after selection
-        setTimeout(() => {
-            this.editorRef?.nativeElement?.focus();
-        }, 50);
-    }
-    /**
-     * Insert a mention chip at the current cursor position
-     */
-    insertMentionChip(suggestion) {
-        const selection = window.getSelection();
-        if (!selection || selection.rangeCount === 0)
-            return;
-        const range = selection.getRangeAt(0);
-        // Delete the trigger + query text (use the active trigger char)
-        const textBeforeCursor = this.getTextBeforeCursor(range);
-        const lastAtIndex = textBeforeCursor.lastIndexOf(this.activeTrigger);
-        const deleteLength = textBeforeCursor.length - lastAtIndex;
-        range.setStart(range.startContainer, range.startOffset - deleteLength);
-        range.deleteContents();
-        // Create mention chip element
-        const chip = this.createMentionChip(suggestion);
-        // Insert chip
-        range.insertNode(chip);
-        // Add space after chip
-        const space = document.createTextNode(' ');
-        range.collapse(false);
-        range.insertNode(space);
-        // Move cursor after the space
-        range.setStartAfter(space);
-        range.collapse(true);
-        selection.removeAllRanges();
-        selection.addRange(range);
-        // Trigger change detection
-        this.onInput();
-    }
-    /**
-     * Create a mention chip DOM element
-     */
-    createMentionChip(suggestion) {
-        const chip = document.createElement('span');
-        chip.className = 'mention-chip';
-        chip.contentEditable = 'false'; // Make chip non-editable
-        chip.setAttribute('data-mention-id', suggestion.id);
-        chip.setAttribute('data-mention-type', suggestion.type);
-        chip.setAttribute('data-mention-name', suggestion.name);
-        // For agents, get configuration presets (AIEngine.Config() already called during app init)
-        let presets = [];
-        if (suggestion.type === 'agent') {
-            presets = AIEngineBase.Instance.GetAgentConfigurationPresets(suggestion.id, true);
-            // Store default preset
-            // IMPORTANT: Store the AIAgentConfiguration.ID (preset ID), not AIConfigurationID
-            // The backend mapping will convert preset ID -> AIConfigurationID
-            const defaultPreset = presets.find(p => p.IsDefault) || presets[0];
-            if (defaultPreset) {
-                chip.setAttribute('data-preset-id', defaultPreset.ID || '');
-                chip.setAttribute('data-preset-name', defaultPreset.Name || '');
-            }
-        }
-        // Apply inline styles directly — color by mention type
-        const palette = suggestion.type === 'user'
-            ? { bg: 'linear-gradient(135deg, #f093fb 0%, #f5576c 100%)', border: 'rgba(240, 147, 251, 0.4)' }
-            : suggestion.type === 'entity'
-                ? { bg: 'linear-gradient(135deg, #11998e 0%, #38ef7d 100%)', border: 'rgba(17, 153, 142, 0.4)' }
-                : suggestion.type === 'query'
-                    ? { bg: 'linear-gradient(135deg, #FF6A00 0%, #FF9E2C 100%)', border: 'rgba(255, 106, 0, 0.4)' }
-                    : { bg: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)', border: 'rgba(102, 126, 234, 0.4)' };
-        chip.style.cssText = `
-      display: inline-flex;
-      align-items: center;
-      gap: 5px;
-      padding: 4px 12px;
-      margin: 0 3px;
-      border-radius: 16px;
-      font-size: 13px;
-      font-weight: 600;
-      cursor: default;
-      user-select: none;
-      vertical-align: middle;
-      white-space: nowrap;
-      pointer-events: all;
-      background: ${palette.bg};
-      color: white;
-      border: 2px solid ${palette.border};
-      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2), 0 1px 2px rgba(0, 0, 0, 0.1);
-    `;
-        // Add icon or image
-        if (suggestion.type === 'agent' && suggestion.imageUrl) {
-            // Use image if available (LogoURL from agent)
-            const img = document.createElement('img');
-            img.src = suggestion.imageUrl;
-            img.alt = suggestion.displayName;
-            img.style.cssText = 'width: 16px; height: 16px; border-radius: 50%; object-fit: cover;';
-            chip.appendChild(img);
-        }
-        else if (suggestion.type === 'agent' && suggestion.icon === 'mj-icon-skip') {
-            // Special handling for mj-icon-skip: use the SVG data URI as an image
-            const img = document.createElement('img');
-            img.src = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 101.89918457031249 96.83947368421053'%3E%3Cg transform='translate(-0.1288232421875,-0.0)'%3E%3Cpath d='M93.85,41.56c-.84,0-1.62.2-2.37.55-3-4.35-7.49-8.12-13.04-11.04l.04-7.18v-14.44h-10.24v17.6c-1.52-.43-3.07-.8-4.67-1.11V0h-10.24v24.72s-.09,0-.14,0h-4.38s-.1,0-.14,0V7.3h-10.24v18.62c-1.6.32-3.15.69-4.67,1.11v-11.67h-10.24v6.09l.04,9.6c-5.55,2.92-10.04,6.7-13.04,11.04-.75-.35-1.53-.55-2.37-.55-4.5,0-8.14,5.61-8.14,12.51s3.64,12.53,8.14,12.53c.58,0,1.14-.12,1.67-.29,4.1,6.62,11.54,12.06,20.98,15.28l.79.13v7.05c0,2.97,1.45,5.58,3.87,6.99,1.18.69,2.5,1.04,3.85,1.03,1.4,0,2.83-.37,4.15-1.12l7.54-4.29,7.56,4.3c1.31.74,2.73,1.12,4.13,1.12s2.67-.35,3.85-1.04c2.42-1.41,3.86-4.02,3.86-6.98v-7.05l.79-.13c9.44-3.22,16.89-8.66,20.98-15.28.54.17,1.09.29,1.68.29,4.5,0,8.14-5.61,8.14-12.53s-3.63-12.51-8.14-12.51' fill='%23AAAAAA'/%3E%3Cpath d='M86.69,50.87c0-12.22-13.6-19.1-28.94-20.66-4.48-.47-9.19-.54-13.52,0-15.34,1.53-28.93,8.41-28.93,20.66,0,8.55,5.7,15.55,12.68,15.55h7.94c3.05,2.5,6.93,4.1,11.08,4.71,2.65.4,5.44.46,8.01,0,4.15-.6,8.05-2.2,11.1-4.71h7.92c6.97,0,12.68-7,12.68-15.55' fill='white' opacity='0.9'/%3E%3Cpath d='M57.83,55.82c-1.19,2.58-3.8,4.35-6.84,4.35s-5.65-1.77-6.84-4.35h13.68Z' fill='%23AAAAAA'/%3E%3Cpath d='M32.52,41.14c1.74,0,3.18,2.13,3.18,4.76s-1.44,4.74-3.18,4.74-3.16-2.13-3.16-4.74,1.41-4.76,3.16-4.76' fill='%23AAAAAA'/%3E%3Cpath d='M69.46,41.14c1.74,0,3.16,2.13,3.16,4.76s-1.41,4.74-3.16,4.74-3.18-2.13-3.18-4.74,1.41-4.76,3.18-4.76' fill='%23AAAAAA'/%3E%3Cpath d='M63.91,76.15c-.82-.48-1.84-.43-2.8.12l-10.13,5.75-10.11-5.75c-.96-.55-1.98-.59-2.8-.12-.82.47-1.29,1.38-1.29,2.49v10.12c0,1.11.47,2.02,1.28,2.49.38.22.8.33,1.24.33.51,0,1.05-.15,1.57-.44l10.12-5.75,10.11,5.75c.52.29,1.05.44,1.56.44.44,0,.86-.11,1.24-.33.81-.48,1.28-1.38,1.28-2.49v-10.12c0-1.11-.47-2.02-1.28-2.49' fill='white' opacity='0.9'/%3E%3C/g%3E%3C/svg%3E";
-            img.alt = suggestion.displayName;
-            img.style.cssText = 'width: 16px; height: 16px; border-radius: 50%; object-fit: cover;';
-            chip.appendChild(img);
-        }
-        else {
-            // Use icon for users or agents without images
-            const icon = document.createElement('i');
-            icon.style.cssText = 'font-size: 12px; opacity: 0.95;';
-            if (suggestion.type === 'agent' && suggestion.icon) {
-                icon.className = this.getIconClasses(suggestion.icon);
-            }
-            else if (suggestion.type === 'user') {
-                icon.className = 'fa-solid fa-user';
-            }
-            else if (suggestion.type === 'entity') {
-                icon.className = this.getIconClasses(suggestion.icon || 'fa-solid fa-table');
-            }
-            else if (suggestion.type === 'query') {
-                icon.className = this.getIconClasses(suggestion.icon || 'fa-solid fa-database');
-            }
-            else {
-                icon.className = 'fa-solid fa-robot';
-            }
-            chip.appendChild(icon);
-        }
-        // Add space between icon/image and text
-        const space = document.createTextNode(' ');
-        chip.appendChild(space);
-        // Add text
-        const text = document.createTextNode(suggestion.displayName);
-        chip.appendChild(text);
-        // Add dropdown if 2+ presets for agents
-        if (suggestion.type === 'agent' && presets.length >= 2) {
-            this.addConfigurationDropdown(chip, presets);
-        }
-        return chip;
-    }
-    /**
-     * Add configuration preset dropdown to agent chip
-     */
-    addConfigurationDropdown(chip, presets) {
-        // Store default preset for comparison
-        const defaultPreset = presets.find(p => p.IsDefault) || presets[0];
-        // Add preset indicator text (only shown when non-default selected)
-        const presetIndicator = document.createElement('span');
-        presetIndicator.className = 'preset-indicator';
-        presetIndicator.style.cssText = `
-      display: none;
-      font-size: 10px;
-      font-weight: 600;
-      font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', 'Courier New', monospace;
-      background: rgba(255, 255, 255, 0.25);
-      padding: 2px 6px;
-      border-radius: 4px;
-      margin-left: 4px;
-      letter-spacing: 0.3px;
-      text-transform: uppercase;
-      border: 1px solid rgba(255, 255, 255, 0.15);
-    `;
-        chip.appendChild(presetIndicator);
-        // Add dropdown chevron button
-        const chevron = document.createElement('i');
-        chevron.className = 'fa-solid fa-chevron-down';
-        chevron.style.cssText = `
-      font-size: 10px;
-      opacity: 0.9;
-      cursor: pointer;
-      padding: 2px;
-    `;
-        chip.appendChild(chevron);
-        // Create dropdown menu (initially hidden) - append to body for global positioning
-        const dropdown = document.createElement('div');
-        dropdown.className = 'preset-dropdown';
-        dropdown.style.cssText = `
-      display: none;
-      position: fixed;
-      background: white;
-      border: 1px solid #ddd;
-      border-radius: 8px;
-      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-      min-width: 200px;
-      max-width: 300px;
-      z-index: 10000;
-      overflow: hidden;
-    `;
-        // Add preset options to dropdown
-        presets.forEach(preset => {
-            const option = document.createElement('div');
-            option.className = 'preset-option';
-            option.style.cssText = `
-        padding: 10px 12px;
-        cursor: pointer;
-        display: flex;
-        align-items: center;
-        gap: 8px;
-        transition: background 0.2s;
-      `;
-            // Check if this is the selected preset
-            const currentPresetId = chip.getAttribute('data-preset-id');
-            const isSelected = UUIDsEqual(preset.ID, currentPresetId);
-            // Add checkmark for selected option
-            const checkmark = document.createElement('i');
-            checkmark.className = 'fa-solid fa-check';
-            checkmark.style.cssText = `
-        font-size: 12px;
-        color: #667eea;
-        opacity: ${isSelected ? '1' : '0'};
-        width: 14px;
-      `;
-            option.appendChild(checkmark);
-            // Add preset text content
-            const textContainer = document.createElement('div');
-            textContainer.style.cssText = 'flex: 1;';
-            const displayName = document.createElement('div');
-            displayName.textContent = preset.DisplayName || preset.Name;
-            displayName.style.cssText = `
-        font-weight: 600;
-        color: #333;
-        font-size: 13px;
-      `;
-            textContainer.appendChild(displayName);
-            if (preset.Description) {
-                const description = document.createElement('div');
-                description.textContent = preset.Description;
-                description.style.cssText = `
-          font-size: 11px;
-          color: #666;
-          margin-top: 2px;
-        `;
-                textContainer.appendChild(description);
-            }
-            option.appendChild(textContainer);
-            // Hover effects
-            option.addEventListener('mouseenter', () => {
-                option.style.background = '#f5f5f5';
-            });
-            option.addEventListener('mouseleave', () => {
-                option.style.background = 'white';
-            });
-            // Click handler to select preset
-            option.addEventListener('click', (e) => {
-                e.stopPropagation();
-                // Update chip data attributes
-                // IMPORTANT: Store preset.ID (AIAgentConfiguration.ID), not AIConfigurationID
-                chip.setAttribute('data-preset-id', preset.ID || '');
-                chip.setAttribute('data-preset-name', preset.Name || '');
-                // Update preset indicator visibility and text
-                const isDefault = UUIDsEqual(preset.ID, defaultPreset.ID);
-                if (isDefault) {
-                    presetIndicator.style.display = 'none';
-                }
-                else {
-                    presetIndicator.style.display = 'inline';
-                    presetIndicator.textContent = preset.DisplayName || preset.Name;
-                }
-                // Update checkmarks
-                dropdown.querySelectorAll('.preset-option').forEach((opt, idx) => {
-                    const check = opt.querySelector('i.fa-check');
-                    if (check) {
-                        check.style.opacity = idx === presets.indexOf(preset) ? '1' : '0';
-                    }
-                });
-                // Close dropdown
-                dropdown.style.display = 'none';
-            });
-            dropdown.appendChild(option);
-        });
-        // Append dropdown to document body for global positioning
-        document.body.appendChild(dropdown);
-        // Helper function to position dropdown relative to chip
-        const positionDropdown = () => {
-            const chipRect = chip.getBoundingClientRect();
-            const viewportHeight = window.innerHeight;
-            const spaceBelow = viewportHeight - chipRect.bottom;
-            // Set left position (same for both above/below)
-            dropdown.style.left = `${chipRect.left}px`;
-            // First, show dropdown to measure its actual height
-            const wasHidden = dropdown.style.display === 'none';
-            if (wasHidden) {
-                dropdown.style.visibility = 'hidden';
-                dropdown.style.display = 'block';
-            }
-            const dropdownHeight = dropdown.offsetHeight;
-            const spaceAbove = chipRect.top;
-            // Position dropdown above chip if not enough space below
-            if (spaceBelow < dropdownHeight && spaceAbove > spaceBelow) {
-                // Show above - position so bottom of dropdown is 4px above top of chip
-                dropdown.style.top = `${chipRect.top - dropdownHeight - 4}px`;
-            }
-            else {
-                // Show below (default) - position 4px below bottom of chip
-                dropdown.style.top = `${chipRect.bottom + 4}px`;
-            }
-            // Restore visibility
-            if (wasHidden) {
-                dropdown.style.visibility = 'visible';
-            }
-        };
-        // Toggle dropdown on chevron click
-        chevron.addEventListener('click', (e) => {
-            e.stopPropagation();
-            const isVisible = dropdown.style.display === 'block';
-            if (isVisible) {
-                dropdown.style.display = 'none';
-            }
-            else {
-                positionDropdown();
-                dropdown.style.display = 'block';
-            }
-        });
-        // Close dropdown when clicking outside
-        const closeDropdown = (e) => {
-            if (!dropdown.contains(e.target) && !chip.contains(e.target)) {
-                dropdown.style.display = 'none';
-            }
-        };
-        document.addEventListener('click', closeDropdown);
-        // Cleanup: remove dropdown from body and event listeners when chip is removed
-        const observer = new MutationObserver((mutations) => {
-            mutations.forEach((mutation) => {
-                mutation.removedNodes.forEach((node) => {
-                    if (node === chip) {
-                        document.removeEventListener('click', closeDropdown);
-                        if (dropdown.parentNode) {
-                            dropdown.parentNode.removeChild(dropdown);
-                        }
-                        observer.disconnect();
-                    }
-                });
-            });
-        });
-        if (chip.parentNode) {
-            observer.observe(chip.parentNode, { childList: true });
-        }
-    }
-    /**
-     * Get icon classes with proper FA prefix
-     */
-    getIconClasses(iconClass) {
-        if (!iconClass)
-            return 'fa-solid fa-robot';
-        if (iconClass.includes('fa-')) {
-            if (iconClass.match(/\b(fa-solid|fa-regular|fa-light|fa-brands)\b/)) {
-                return iconClass;
-            }
-            return `fa-solid ${iconClass}`;
-        }
-        return iconClass;
-    }
-    /**
-     * Handle backspace key - delete entire chip if cursor is right after one
-     */
-    handleBackspace(event) {
-        const selection = window.getSelection();
-        if (!selection || selection.rangeCount === 0)
-            return;
-        const range = selection.getRangeAt(0);
-        // Check if cursor is right after a mention chip
-        if (range.collapsed && range.startOffset > 0) {
-            const prevNode = range.startContainer.childNodes[range.startOffset - 1];
-            if (prevNode && prevNode.classList?.contains('mention-chip')) {
-                event.preventDefault();
-                prevNode.remove();
-                this.onInput();
-            }
-        }
-    }
-    /**
-     * Close mention dropdown
-     */
-    closeMentionDropdown() {
-        this.showMentionDropdown = false;
-        this.mentionSuggestions = [];
-        this.mentionStartIndex = -1;
-        this.mentionQuery = '';
-        this.activeTrigger = '@';
-    }
-    /**
-     * Convert editor HTML to plain text with @mentions
-     */
-    getPlainText() {
-        const editor = this.editorRef?.nativeElement;
-        if (!editor)
-            return '';
-        let text = '';
-        const nodes = editor.childNodes;
-        for (let i = 0; i < nodes.length; i++) {
-            const node = nodes[i];
-            if (node.nodeType === Node.TEXT_NODE) {
-                text += node.textContent || '';
-            }
-            else if (node.nodeType === Node.ELEMENT_NODE) {
-                const element = node;
-                if (element.classList.contains('mention-chip')) {
-                    const name = element.getAttribute('data-mention-name') || '';
-                    const mentionType = element.getAttribute('data-mention-type');
-                    const prefix = mentionType === 'entity' || mentionType === 'query' ? '#' : '@';
-                    // Use quoted format if name has spaces
-                    text += name.includes(' ') ? `${prefix}"${name}"` : `${prefix}${name}`;
-                }
-                else if (element.tagName === 'BR') {
-                    text += '\n';
-                }
-                else if (element.tagName === 'DIV') {
-                    // Handle line breaks from contentEditable
-                    if (i > 0)
-                        text += '\n';
-                    text += this.getNodeText(element);
-                }
-                else {
-                    text += element.textContent || '';
-                }
-            }
-        }
-        return text;
-    }
-    /**
-     * Get text from a node recursively
-     */
-    getNodeText(node) {
-        let text = '';
-        const children = node.childNodes;
-        for (let i = 0; i < children.length; i++) {
-            const child = children[i];
-            if (child.nodeType === Node.TEXT_NODE) {
-                text += child.textContent || '';
-            }
-            else if (child.nodeType === Node.ELEMENT_NODE) {
-                const element = child;
-                if (element.classList.contains('mention-chip')) {
-                    const name = element.getAttribute('data-mention-name') || '';
-                    const mentionType = element.getAttribute('data-mention-type');
-                    const prefix = mentionType === 'entity' || mentionType === 'query' ? '#' : '@';
-                    text += name.includes(' ') ? `${prefix}"${name}"` : `${prefix}${name}`;
-                }
-                else {
-                    text += this.getNodeText(element);
-                }
-            }
-        }
-        return text;
-    }
-    /**
-     * Set editor content from plain text (for programmatic updates)
-     */
-    setEditorContent(text) {
-        const editor = this.editorRef?.nativeElement;
-        if (!editor)
-            return;
-        // For now, just set as plain text
-        // TODO: Parse @mentions and render as chips
-        editor.textContent = text;
-    }
-    // ControlValueAccessor implementation
-    writeValue(value) {
-        if (value) {
-            this.setEditorContent(value);
-        }
-        else if (this.editorRef?.nativeElement) {
-            this.editorRef.nativeElement.textContent = '';
-        }
-    }
-    registerOnChange(fn) {
-        this.onChange = fn;
-    }
-    registerOnTouched(fn) {
-        this.onTouched = fn;
-    }
-    setDisabledState(isDisabled) {
-        this.disabled = isDisabled;
-        if (this.editorRef?.nativeElement) {
-            this.editorRef.nativeElement.contentEditable = (!isDisabled).toString();
-        }
-    }
-    /**
-     * Focus the editor
-     */
-    focus() {
-        this.editorRef?.nativeElement?.focus();
-    }
-    /**
-     * Clear the editor content and pending attachments
-     */
-    clear() {
-        if (this.editorRef?.nativeElement) {
-            this.editorRef.nativeElement.textContent = '';
-            this.onInput();
-        }
-        this.clearPendingAttachments();
-    }
-    /**
-     * Extract mention chips with their configuration data
-     * Returns array of objects containing mention info and preset configuration
-     */
-    getMentionChipsData() {
-        const editor = this.editorRef?.nativeElement;
-        if (!editor)
-            return [];
-        const chips = [];
-        const mentionElements = editor.querySelectorAll('.mention-chip');
-        mentionElements.forEach(chip => {
-            const element = chip;
-            const id = element.getAttribute('data-mention-id') || '';
-            const type = element.getAttribute('data-mention-type') || '';
-            const name = element.getAttribute('data-mention-name') || '';
-            const presetId = element.getAttribute('data-preset-id') || undefined;
-            const presetName = element.getAttribute('data-preset-name') || undefined;
-            chips.push({
-                id,
-                type,
-                name,
-                ...(presetId ? { presetId } : {}),
-                ...(presetName ? { presetName } : {})
-            });
-        });
-        return chips;
-    }
-    /**
-     * Get the plain text value with mentions encoded as JSON
-     * This format preserves configuration information when messages are saved
-     * Format: @{type:"agent",id:"uuid",name:"Agent Name",configId:"uuid",config:"High"}
-     */
-    getPlainTextWithJsonMentions() {
-        const editor = this.editorRef?.nativeElement;
-        if (!editor)
-            return '';
-        let plainText = '';
-        const childNodes = Array.from(editor.childNodes);
-        for (const node of childNodes) {
-            if (node.nodeType === Node.TEXT_NODE) {
-                // Regular text node
-                plainText += node.textContent || '';
-            }
-            else if (node.nodeType === Node.ELEMENT_NODE) {
-                const element = node;
-                if (element.classList.contains('mention-chip')) {
-                    // Extract mention data attributes
-                    const type = element.getAttribute('data-mention-type') || '';
-                    const id = element.getAttribute('data-mention-id') || '';
-                    const name = element.getAttribute('data-mention-name') || '';
-                    const presetId = element.getAttribute('data-preset-id');
-                    const presetName = element.getAttribute('data-preset-name');
-                    // Build JSON mention object (compact format - no spaces)
-                    const mentionObj = {
-                        type,
-                        id,
-                        name
-                    };
-                    // Add configuration fields if present (for agents with non-default presets)
-                    if (presetId) {
-                        mentionObj.configId = presetId;
-                    }
-                    if (presetName) {
-                        mentionObj.config = presetName;
-                    }
-                    // Encode as JSON mention
-                    // Don't remove spaces from the JSON string - spaces in values (like agent names) need to be preserved
-                    plainText += `@${JSON.stringify(mentionObj)}`;
-                }
-                else {
-                    // Other HTML element (e.g., <br>)
-                    if (element.tagName === 'BR') {
-                        plainText += '\n';
-                    }
-                    else {
-                        plainText += element.textContent || '';
-                    }
-                }
-            }
-        }
-        return plainText;
-    }
-    // ==================== Attachment Handling Methods ====================
-    /**
-     * Handle drag over event
-     */
-    onDragOver(event) {
-        if (!this.enableAttachments)
-            return;
-        event.preventDefault();
-        event.stopPropagation();
-        this.isDragOver = true;
-    }
-    /**
-     * Handle drag leave event
-     */
-    onDragLeave(event) {
-        event.preventDefault();
-        event.stopPropagation();
-        this.isDragOver = false;
-    }
-    /**
-     * Handle drop event
-     */
-    onDrop(event) {
-        if (!this.enableAttachments)
-            return;
-        event.preventDefault();
-        event.stopPropagation();
-        this.isDragOver = false;
-        if (event.dataTransfer?.files) {
-            const files = Array.from(event.dataTransfer.files);
-            for (const file of files) {
-                if (this.isAcceptedFile(file)) {
-                    this.processFile(file);
-                }
-            }
-        }
-    }
-    /**
-     * Handle file input change (from file picker)
-     */
-    onFileSelected(event) {
-        const input = event.target;
-        if (input.files) {
-            const files = Array.from(input.files);
-            for (const file of files) {
-                this.processFile(file);
-            }
-            // Reset input so same file can be selected again
-            input.value = '';
-        }
-    }
-    /**
-     * Process a file for attachment
-     */
-    async processFile(file) {
-        // Validate file
-        const validation = this.validateFile(file);
-        if (!validation.valid) {
-            this.attachmentError.emit(validation.error);
-            return;
-        }
-        // Read file as data URL
-        const dataUrl = await this.readFileAsDataUrl(file);
-        if (!dataUrl) {
-            this.attachmentError.emit('Failed to read file');
-            return;
-        }
-        // Get image dimensions if applicable
-        let width;
-        let height;
-        if (file.type.startsWith('image/')) {
-            const dimensions = await this.getImageDimensions(dataUrl);
-            width = dimensions.width;
-            height = dimensions.height;
-        }
-        // Create pending attachment
-        const attachment = {
-            id: this.generateAttachmentId(),
-            file,
-            dataUrl,
-            mimeType: file.type,
-            fileName: file.name,
-            sizeBytes: file.size,
-            width,
-            height,
-            thumbnailUrl: file.type.startsWith('image/') ? dataUrl : undefined
-        };
-        // Add to pending attachments
-        this.pendingAttachments.push(attachment);
-        this.attachmentsChanged.emit([...this.pendingAttachments]);
-        this.cdr.detectChanges();
-    }
-    /**
-     * Validate a file against settings
-     */
-    validateFile(file) {
-        // Check count limit
-        if (this.pendingAttachments.length >= this.maxAttachments) {
-            return {
-                valid: false,
-                error: `Maximum ${this.maxAttachments} attachments allowed`
-            };
-        }
-        // Check size limit
-        if (file.size > this.maxAttachmentSizeBytes) {
-            const maxMB = (this.maxAttachmentSizeBytes / (1024 * 1024)).toFixed(1);
-            const fileMB = (file.size / (1024 * 1024)).toFixed(1);
-            return {
-                valid: false,
-                error: `File size (${fileMB}MB) exceeds maximum (${maxMB}MB)`
-            };
-        }
-        // Check file type
-        if (!this.isAcceptedFile(file)) {
-            return {
-                valid: false,
-                error: `File type ${file.type || 'unknown'} not accepted`
-            };
-        }
-        return { valid: true };
-    }
-    /**
-     * Check if file type is accepted
-     */
-    isAcceptedFile(file) {
-        if (this.acceptedFileTypes === '*' || this.acceptedFileTypes === '*/*') {
-            return true;
-        }
-        const acceptedTypes = this.acceptedFileTypes.split(',').map(t => t.trim());
-        for (const accepted of acceptedTypes) {
-            // Handle universal wildcard */* anywhere in the list
-            if (accepted === '*/*') {
-                return true;
-            }
-            // Handle wildcard MIME types like "image/*"
-            if (accepted.endsWith('/*')) {
-                const category = accepted.slice(0, -2);
-                if (file.type.startsWith(category + '/')) {
-                    return true;
-                }
-            }
-            else if (accepted.startsWith('.')) {
-                // Handle file extensions like ".png"
-                if (file.name.toLowerCase().endsWith(accepted.toLowerCase())) {
-                    return true;
-                }
-            }
-            else if (file.type === accepted) {
-                // Exact MIME type match
-                return true;
-            }
-        }
-        return false;
-    }
-    /**
-     * Read file as data URL
-     */
-    readFileAsDataUrl(file) {
-        return new Promise((resolve) => {
-            const reader = new FileReader();
-            reader.onload = () => resolve(reader.result);
-            reader.onerror = () => resolve(null);
-            reader.readAsDataURL(file);
-        });
-    }
-    /**
-     * Get image dimensions
-     */
-    getImageDimensions(dataUrl) {
-        return new Promise((resolve) => {
-            const img = new Image();
-            img.onload = () => {
-                resolve({ width: img.naturalWidth, height: img.naturalHeight });
-            };
-            img.onerror = () => {
-                resolve({ width: 0, height: 0 });
-            };
-            img.src = dataUrl;
-        });
-    }
-    /**
-     * Generate unique attachment ID
-     */
-    generateAttachmentId() {
-        return `att_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
-    }
-    /**
-     * Remove a pending attachment by ID
-     */
-    removeAttachment(id) {
-        const index = this.pendingAttachments.findIndex(a => a.id === id);
-        if (index !== -1) {
-            this.pendingAttachments.splice(index, 1);
-            this.attachmentsChanged.emit([...this.pendingAttachments]);
-            this.cdr.detectChanges();
-        }
-    }
-    /**
-     * Get all pending attachments
-     */
-    getPendingAttachments() {
-        return [...this.pendingAttachments];
-    }
-    /**
-     * Add an artifact as a pending attachment programmatically.
-     * Used by the artifact picker to attach artifacts as conversation inputs.
-     */
-    AddArtifactAttachment(artifact) {
-        const attachment = {
-            id: crypto.randomUUID(),
-            file: null,
-            dataUrl: '',
-            mimeType: artifact.mimeType,
-            fileName: artifact.fileName,
-            sizeBytes: artifact.sizeBytes,
-            fileID: artifact.fileID,
-            source: 'artifact',
-            artifactVersionId: artifact.artifactVersionId
-        };
-        this.pendingAttachments.push(attachment);
-        this.attachmentsChanged.emit([...this.pendingAttachments]);
-        return attachment;
-    }
-    /**
-     * Clear all pending attachments
-     */
-    clearPendingAttachments() {
-        this.pendingAttachments = [];
-        this.attachmentsChanged.emit([]);
-        this.cdr.detectChanges();
-    }
-    /**
-     * Handle click on an attachment thumbnail
-     */
-    onAttachmentClick(attachment) {
-        this.attachmentClicked.emit(attachment);
-    }
-    /**
-     * Check if there are any pending attachments
-     */
-    hasAttachments() {
-        return this.pendingAttachments.length > 0;
-    }
-    /**
-     * Trigger file picker programmatically
-     */
-    openFilePicker() {
-        const input = document.createElement('input');
-        input.type = 'file';
-        // If */* is in the list, accept all files (some browsers don't handle */* correctly)
-        input.accept = this.acceptedFileTypes.includes('*/*') ? '' : this.acceptedFileTypes;
-        input.multiple = true;
-        input.onchange = (e) => this.onFileSelected(e);
-        input.click();
-    }
-    static ɵfac = function MentionEditorComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || MentionEditorComponent)(i0.ɵɵdirectiveInject(i1.MentionAutocompleteService), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MentionEditorComponent, selectors: [["mj-mention-editor"]], viewQuery: function MentionEditorComponent_Query(rf, ctx) { if (rf & 1) {
-            i0.ɵɵviewQuery(_c0, 5);
-        } if (rf & 2) {
-            let _t;
-            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.editorRef = _t.first);
-        } }, inputs: { placeholder: "placeholder", disabled: "disabled", currentUser: "currentUser", enableMentions: "enableMentions", enableAttachments: "enableAttachments", maxAttachments: "maxAttachments", maxAttachmentSizeBytes: "maxAttachmentSizeBytes", acceptedFileTypes: "acceptedFileTypes" }, outputs: { valueChange: "valueChange", mentionSelected: "mentionSelected", enterPressed: "enterPressed", attachmentsChanged: "attachmentsChanged", attachmentError: "attachmentError", attachmentClicked: "attachmentClicked" }, standalone: false, features: [i0.ɵɵProvidersFeature([
-                {
-                    provide: NG_VALUE_ACCESSOR,
-                    useExisting: forwardRef(() => MentionEditorComponent),
-                    multi: true
-                }
-            ])], decls: 6, vars: 7, consts: [["editor", ""], [1, "mention-editor-container", 3, "click", "dragover", "dragleave", "drop"], [1, "pending-attachments"], ["contenteditable", "true", 1, "mention-editor", 3, "input", "keydown", "blur", "paste"], [1, "drop-overlay"], [3, "suggestions", "position", "showAbove", "useFixedPositioning", "visible"], [1, "attachment-thumbnail"], [1, "attachment-thumbnail", 3, "click"], [1, "thumbnail-image", 3, "src", "alt"], [1, "thumbnail-placeholder"], ["title", "Remove attachment", 1, "remove-attachment", 3, "click"], [1, "fa-solid", "fa-times"], [1, "fa-solid", "fa-file"], [1, "file-name"], [1, "drop-message"], [1, "fa-solid", "fa-cloud-arrow-up"], [3, "suggestionSelected", "closed", "suggestions", "position", "showAbove", "useFixedPositioning", "visible"]], template: function MentionEditorComponent_Template(rf, ctx) { if (rf & 1) {
-            const _r1 = i0.ɵɵgetCurrentView();
-            i0.ɵɵelementStart(0, "div", 1);
-            i0.ɵɵlistener("click", function MentionEditorComponent_Template_div_click_0_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onContainerClick($event)); })("dragover", function MentionEditorComponent_Template_div_dragover_0_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onDragOver($event)); })("dragleave", function MentionEditorComponent_Template_div_dragleave_0_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onDragLeave($event)); })("drop", function MentionEditorComponent_Template_div_drop_0_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onDrop($event)); });
-            i0.ɵɵconditionalCreate(1, MentionEditorComponent_Conditional_1_Template, 3, 0, "div", 2);
-            i0.ɵɵelementStart(2, "div", 3, 0);
-            i0.ɵɵlistener("input", function MentionEditorComponent_Template_div_input_2_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onInput()); })("keydown", function MentionEditorComponent_Template_div_keydown_2_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onKeyDown($event)); })("blur", function MentionEditorComponent_Template_div_blur_2_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onBlur()); })("paste", function MentionEditorComponent_Template_div_paste_2_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onPaste($event)); });
-            i0.ɵɵelementEnd();
-            i0.ɵɵconditionalCreate(4, MentionEditorComponent_Conditional_4_Template, 5, 0, "div", 4);
-            i0.ɵɵconditionalCreate(5, MentionEditorComponent_Conditional_5_Template, 1, 5, "mj-mention-dropdown", 5);
-            i0.ɵɵelementEnd();
-        } if (rf & 2) {
-            i0.ɵɵclassProp("drag-over", ctx.isDragOver);
-            i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.pendingAttachments.length > 0 ? 1 : -1);
-            i0.ɵɵadvance();
-            i0.ɵɵattribute("contenteditable", !ctx.disabled)("data-placeholder", ctx.placeholder);
-            i0.ɵɵadvance(2);
-            i0.ɵɵconditional(ctx.isDragOver ? 4 : -1);
-            i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.showMentionDropdown && ctx.enableMentions ? 5 : -1);
-        } }, dependencies: [i2.MentionDropdownComponent], styles: [".mention-editor-container[_ngcontent-%COMP%] {\n  position: relative;\n  width: 100%;\n  display: block;\n}\n\n.mention-editor-container.drag-over[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-brand-primary) 5%, transparent);\n  border-color: var(--mj-brand-primary);\n}\n\n.mention-editor[_ngcontent-%COMP%] {\n  display: block;\n  width: 100%;\n  min-height: 100px;\n  max-height: 300px;\n  padding: 7px 3.5rem 7px 12px;\n  outline: none;\n  border: none;\n  background: transparent;\n  font-family: inherit;\n  font-size: 1rem;\n  line-height: 1.5;\n  overflow-y: auto;\n  overflow-x: hidden;\n  word-wrap: break-word;\n  white-space: pre-wrap;\n  cursor: text;\n  user-select: text;\n  box-sizing: border-box;\n}\n.mention-editor[_ngcontent-%COMP%]:empty:before {\n  content: attr(data-placeholder);\n  color: var(--mj-text-muted);\n  pointer-events: none;\n  position: absolute;\n}\n.mention-editor[_ngcontent-%COMP%]:focus {\n  outline: none;\n}\n.mention-editor[contenteditable=false][_ngcontent-%COMP%] {\n  cursor: not-allowed;\n  opacity: 0.6;\n  background: var(--mj-bg-surface-sunken);\n}\n@media (max-width: 768px) {\n  .mention-editor[_ngcontent-%COMP%] {\n    font-size: 16px;\n    padding: 5px;\n    padding-right: 3rem;\n  }\n}\n\n  .mention-chip {\n  display: inline-flex;\n  align-items: center;\n  gap: 5px;\n  padding: 4px 12px;\n  margin: 0 3px;\n  border-radius: 16px;\n  font-size: 13px;\n  font-weight: 600;\n  cursor: default;\n  user-select: none;\n  vertical-align: middle;\n  white-space: nowrap;\n  pointer-events: all;\n  -webkit-user-modify: read-only;\n  -moz-user-modify: read-only;\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n  border: 2px solid color-mix(in srgb, var(--mj-brand-primary) 40%, transparent);\n  box-shadow: var(--mj-shadow-md);\n  animation: _ngcontent-%COMP%_chipInsert 0.15s ease-out;\n}\n  .mention-chip i {\n  font-size: 12px;\n  opacity: 0.95;\n}\n  .mention-chip[data-mention-type=user] {\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n  border: 2px solid color-mix(in srgb, var(--mj-brand-primary) 40%, transparent);\n}\n  .mention-chip:hover {\n  transform: translateY(-1px);\n  box-shadow: var(--mj-shadow-lg);\n  transition: all 0.2s ease;\n}\n  .mention-chip:focus,   .mention-chip.selected {\n  outline: 2px solid var(--mj-brand-primary);\n  outline-offset: 2px;\n}\n@keyframes _ngcontent-%COMP%_chipInsert {\n  0% {\n    transform: scale(0.8);\n    opacity: 0;\n  }\n  100% {\n    transform: scale(1);\n    opacity: 1;\n  }\n}\n\n.mention-editor[_ngcontent-%COMP%]   .mention-chip[_ngcontent-%COMP%]    + .mention-chip[_ngcontent-%COMP%] {\n  margin-left: 4px;\n}\n.mention-editor[_ngcontent-%COMP%]   br[_ngcontent-%COMP%] {\n  display: block;\n  content: \"\";\n  margin: 0;\n}\n\n.mention-editor[_ngcontent-%COMP%]::-webkit-scrollbar {\n  width: 6px;\n}\n.mention-editor[_ngcontent-%COMP%]::-webkit-scrollbar-track {\n  background: transparent;\n}\n.mention-editor[_ngcontent-%COMP%]::-webkit-scrollbar-thumb {\n  background: color-mix(in srgb, var(--mj-text-primary) 20%, transparent);\n  border-radius: 3px;\n}\n.mention-editor[_ngcontent-%COMP%]::-webkit-scrollbar-thumb:hover {\n  background: color-mix(in srgb, var(--mj-text-primary) 30%, transparent);\n}\n\n\n\n\n.pending-attachments[_ngcontent-%COMP%] {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 8px;\n  padding: 8px 12px;\n  border-bottom: 1px solid color-mix(in srgb, var(--mj-text-primary) 8%, transparent);\n  background: color-mix(in srgb, var(--mj-text-primary) 2%, transparent);\n}\n\n.attachment-thumbnail[_ngcontent-%COMP%] {\n  position: relative;\n  width: 80px;\n  height: 80px;\n  border-radius: 8px;\n  overflow: hidden;\n  cursor: pointer;\n  transition: transform 0.2s, box-shadow 0.2s;\n  background: var(--mj-bg-surface-sunken);\n  border: 1px solid color-mix(in srgb, var(--mj-text-primary) 10%, transparent);\n}\n\n.attachment-thumbnail[_ngcontent-%COMP%]:hover {\n  transform: scale(1.05);\n  box-shadow: var(--mj-shadow-lg);\n}\n\n.thumbnail-image[_ngcontent-%COMP%] {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}\n\n.thumbnail-placeholder[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  padding: 8px;\n  color: var(--mj-text-secondary);\n}\n\n.thumbnail-placeholder[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 24px;\n  margin-bottom: 4px;\n  color: var(--mj-text-muted);\n}\n\n.thumbnail-placeholder[_ngcontent-%COMP%]   .file-name[_ngcontent-%COMP%] {\n  font-size: 10px;\n  text-align: center;\n  word-break: break-all;\n  line-height: 1.2;\n  max-height: 36px;\n  overflow: hidden;\n}\n\n.remove-attachment[_ngcontent-%COMP%] {\n  position: absolute;\n  top: 4px;\n  right: 4px;\n  width: 20px;\n  height: 20px;\n  border-radius: 50%;\n  background: color-mix(in srgb, var(--mj-text-primary) 60%, transparent);\n  color: var(--mj-text-inverse);\n  border: none;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  opacity: 0;\n  transition: opacity 0.2s, background 0.2s;\n}\n\n.attachment-thumbnail[_ngcontent-%COMP%]:hover   .remove-attachment[_ngcontent-%COMP%] {\n  opacity: 1;\n}\n\n.remove-attachment[_ngcontent-%COMP%]:hover {\n  background: color-mix(in srgb, var(--mj-status-error) 90%, transparent);\n}\n\n.remove-attachment[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 10px;\n}\n\n\n\n.drop-overlay[_ngcontent-%COMP%] {\n  position: absolute;\n  inset: 0;\n  background: color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n  backdrop-filter: blur(2px);\n  border: 2px dashed var(--mj-brand-primary);\n  border-radius: 8px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 100;\n  pointer-events: none;\n}\n\n.drop-message[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 8px;\n  color: var(--mj-brand-primary);\n  font-weight: 600;\n}\n\n.drop-message[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 32px;\n}\n\n.drop-message[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] {\n  font-size: 14px;\n}"] });
-}
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MentionEditorComponent, [{
-        type: Component,
-        args: [{ standalone: false, selector: 'mj-mention-editor', providers: [
-                    {
-                        provide: NG_VALUE_ACCESSOR,
-                        useExisting: forwardRef(() => MentionEditorComponent),
-                        multi: true
-                    }
-                ], template: "<div class=\"mention-editor-container\"\n  [class.drag-over]=\"isDragOver\"\n  (click)=\"onContainerClick($event)\"\n  (dragover)=\"onDragOver($event)\"\n  (dragleave)=\"onDragLeave($event)\"\n  (drop)=\"onDrop($event)\">\n\n  <!-- Pending Attachments Preview -->\n  @if (pendingAttachments.length > 0) {\n    <div class=\"pending-attachments\">\n      @for (attachment of pendingAttachments; track attachment) {\n        <div class=\"attachment-thumbnail\"\n          (click)=\"onAttachmentClick(attachment)\">\n          @if (attachment.thumbnailUrl) {\n            <img\n              [src]=\"attachment.thumbnailUrl\"\n              [alt]=\"attachment.fileName\"\n              class=\"thumbnail-image\">\n          }\n          @if (!attachment.thumbnailUrl) {\n            <div class=\"thumbnail-placeholder\">\n              <i class=\"fa-solid fa-file\"></i>\n              <span class=\"file-name\">{{ attachment.fileName }}</span>\n            </div>\n          }\n          <button class=\"remove-attachment\"\n            (click)=\"removeAttachment(attachment.id); $event.stopPropagation()\"\n            title=\"Remove attachment\">\n            <i class=\"fa-solid fa-times\"></i>\n          </button>\n        </div>\n      }\n    </div>\n  }\n\n  <div\n    #editor\n    class=\"mention-editor\"\n    contenteditable=\"true\"\n    [attr.contenteditable]=\"!disabled\"\n    [attr.data-placeholder]=\"placeholder\"\n    (input)=\"onInput()\"\n    (keydown)=\"onKeyDown($event)\"\n    (blur)=\"onBlur()\"\n    (paste)=\"onPaste($event)\"\n  ></div>\n\n  <!-- Drag & Drop Overlay -->\n  @if (isDragOver) {\n    <div class=\"drop-overlay\">\n      <div class=\"drop-message\">\n        <i class=\"fa-solid fa-cloud-arrow-up\"></i>\n        <span>Drop files here</span>\n      </div>\n    </div>\n  }\n\n  <!-- Mention Dropdown -->\n  @if (showMentionDropdown && enableMentions) {\n    <mj-mention-dropdown\n      [suggestions]=\"mentionSuggestions\"\n      [position]=\"mentionDropdownPosition\"\n      [showAbove]=\"mentionDropdownShowAbove\"\n      [useFixedPositioning]=\"true\"\n      [visible]=\"true\"\n      (suggestionSelected)=\"onMentionSelected($event)\"\n      (closed)=\"closeMentionDropdown()\">\n    </mj-mention-dropdown>\n  }\n</div>\n", styles: [".mention-editor-container {\n  position: relative;\n  width: 100%;\n  display: block;\n}\n\n.mention-editor-container.drag-over {\n  background: color-mix(in srgb, var(--mj-brand-primary) 5%, transparent);\n  border-color: var(--mj-brand-primary);\n}\n\n.mention-editor {\n  display: block;\n  width: 100%;\n  min-height: 100px;\n  max-height: 300px;\n  padding: 7px 3.5rem 7px 12px;\n  outline: none;\n  border: none;\n  background: transparent;\n  font-family: inherit;\n  font-size: 1rem;\n  line-height: 1.5;\n  overflow-y: auto;\n  overflow-x: hidden;\n  word-wrap: break-word;\n  white-space: pre-wrap;\n  cursor: text;\n  user-select: text;\n  box-sizing: border-box;\n}\n.mention-editor:empty:before {\n  content: attr(data-placeholder);\n  color: var(--mj-text-muted);\n  pointer-events: none;\n  position: absolute;\n}\n.mention-editor:focus {\n  outline: none;\n}\n.mention-editor[contenteditable=false] {\n  cursor: not-allowed;\n  opacity: 0.6;\n  background: var(--mj-bg-surface-sunken);\n}\n@media (max-width: 768px) {\n  .mention-editor {\n    font-size: 16px;\n    padding: 5px;\n    padding-right: 3rem;\n  }\n}\n\n::ng-deep .mention-chip {\n  display: inline-flex;\n  align-items: center;\n  gap: 5px;\n  padding: 4px 12px;\n  margin: 0 3px;\n  border-radius: 16px;\n  font-size: 13px;\n  font-weight: 600;\n  cursor: default;\n  user-select: none;\n  vertical-align: middle;\n  white-space: nowrap;\n  pointer-events: all;\n  -webkit-user-modify: read-only;\n  -moz-user-modify: read-only;\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n  border: 2px solid color-mix(in srgb, var(--mj-brand-primary) 40%, transparent);\n  box-shadow: var(--mj-shadow-md);\n  animation: chipInsert 0.15s ease-out;\n}\n::ng-deep .mention-chip i {\n  font-size: 12px;\n  opacity: 0.95;\n}\n::ng-deep .mention-chip[data-mention-type=user] {\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n  border: 2px solid color-mix(in srgb, var(--mj-brand-primary) 40%, transparent);\n}\n::ng-deep .mention-chip:hover {\n  transform: translateY(-1px);\n  box-shadow: var(--mj-shadow-lg);\n  transition: all 0.2s ease;\n}\n::ng-deep .mention-chip:focus, ::ng-deep .mention-chip.selected {\n  outline: 2px solid var(--mj-brand-primary);\n  outline-offset: 2px;\n}\n@keyframes chipInsert {\n  0% {\n    transform: scale(0.8);\n    opacity: 0;\n  }\n  100% {\n    transform: scale(1);\n    opacity: 1;\n  }\n}\n\n.mention-editor .mention-chip + .mention-chip {\n  margin-left: 4px;\n}\n.mention-editor br {\n  display: block;\n  content: \"\";\n  margin: 0;\n}\n\n.mention-editor::-webkit-scrollbar {\n  width: 6px;\n}\n.mention-editor::-webkit-scrollbar-track {\n  background: transparent;\n}\n.mention-editor::-webkit-scrollbar-thumb {\n  background: color-mix(in srgb, var(--mj-text-primary) 20%, transparent);\n  border-radius: 3px;\n}\n.mention-editor::-webkit-scrollbar-thumb:hover {\n  background: color-mix(in srgb, var(--mj-text-primary) 30%, transparent);\n}\n\n/* ==================== Attachment Styles ==================== */\n\n.pending-attachments {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 8px;\n  padding: 8px 12px;\n  border-bottom: 1px solid color-mix(in srgb, var(--mj-text-primary) 8%, transparent);\n  background: color-mix(in srgb, var(--mj-text-primary) 2%, transparent);\n}\n\n.attachment-thumbnail {\n  position: relative;\n  width: 80px;\n  height: 80px;\n  border-radius: 8px;\n  overflow: hidden;\n  cursor: pointer;\n  transition: transform 0.2s, box-shadow 0.2s;\n  background: var(--mj-bg-surface-sunken);\n  border: 1px solid color-mix(in srgb, var(--mj-text-primary) 10%, transparent);\n}\n\n.attachment-thumbnail:hover {\n  transform: scale(1.05);\n  box-shadow: var(--mj-shadow-lg);\n}\n\n.thumbnail-image {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}\n\n.thumbnail-placeholder {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  padding: 8px;\n  color: var(--mj-text-secondary);\n}\n\n.thumbnail-placeholder i {\n  font-size: 24px;\n  margin-bottom: 4px;\n  color: var(--mj-text-muted);\n}\n\n.thumbnail-placeholder .file-name {\n  font-size: 10px;\n  text-align: center;\n  word-break: break-all;\n  line-height: 1.2;\n  max-height: 36px;\n  overflow: hidden;\n}\n\n.remove-attachment {\n  position: absolute;\n  top: 4px;\n  right: 4px;\n  width: 20px;\n  height: 20px;\n  border-radius: 50%;\n  background: color-mix(in srgb, var(--mj-text-primary) 60%, transparent);\n  color: var(--mj-text-inverse);\n  border: none;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  opacity: 0;\n  transition: opacity 0.2s, background 0.2s;\n}\n\n.attachment-thumbnail:hover .remove-attachment {\n  opacity: 1;\n}\n\n.remove-attachment:hover {\n  background: color-mix(in srgb, var(--mj-status-error) 90%, transparent);\n}\n\n.remove-attachment i {\n  font-size: 10px;\n}\n\n/* Drop Overlay */\n.drop-overlay {\n  position: absolute;\n  inset: 0;\n  background: color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n  backdrop-filter: blur(2px);\n  border: 2px dashed var(--mj-brand-primary);\n  border-radius: 8px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 100;\n  pointer-events: none;\n}\n\n.drop-message {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 8px;\n  color: var(--mj-brand-primary);\n  font-weight: 600;\n}\n\n.drop-message i {\n  font-size: 32px;\n}\n\n.drop-message span {\n  font-size: 14px;\n}\n"] }]
-    }], () => [{ type: i1.MentionAutocompleteService }, { type: i0.ChangeDetectorRef }], { editorRef: [{
-            type: ViewChild,
-            args: ['editor', { static: false }]
-        }], placeholder: [{
-            type: Input
-        }], disabled: [{
-            type: Input
-        }], currentUser: [{
-            type: Input
-        }], enableMentions: [{
-            type: Input
-        }], enableAttachments: [{
-            type: Input
-        }], maxAttachments: [{
-            type: Input
-        }], maxAttachmentSizeBytes: [{
-            type: Input
-        }], acceptedFileTypes: [{
-            type: Input
-        }], valueChange: [{
-            type: Output
-        }], mentionSelected: [{
-            type: Output
-        }], enterPressed: [{
-            type: Output
-        }], attachmentsChanged: [{
-            type: Output
-        }], attachmentError: [{
-            type: Output
-        }], attachmentClicked: [{
-            type: Output
-        }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MentionEditorComponent, { className: "MentionEditorComponent", filePath: "src/lib/components/mention/mention-editor.component.ts", lineNumber: 69 }); })();
-//# sourceMappingURL=mention-editor.component.js.map