@memberjunction/ng-composer 0.0.0 → 5.45.1

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

@@ -0,0 +1,1342 @@
+import { Component, Input, Output, EventEmitter, ViewChild, forwardRef } from '@angular/core';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import { DiscoverComposerTriggerProviders } from '../../composer-trigger-provider';
+import { UUIDsEqual } from '@memberjunction/global';
+import * as i0 from "@angular/core";
+import * as i1 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 {
+    cdr;
+    editorRef;
+    placeholder = 'Type @ to mention agents or users, # for entities...';
+    disabled = false;
+    currentUser;
+    /** Master switch for all mention/command triggers. When false no providers are consulted. */
+    enableMentions = true;
+    /**
+     * Explicit trigger-provider list — when bound, EXACTLY these providers are active
+     * (explicit list wins over discovery). Leave null to discover providers registered
+     * with the ClassFactory via `@RegisterClass(ComposerTriggerProvider, '<Key>')`.
+     */
+    TriggerProviders = null;
+    /**
+     * Discovery-mode filter: providers whose stable `Key` appears here are skipped when
+     * resolving registered providers. Ignored when `TriggerProviders` is bound.
+     */
+    ExcludedTriggerKeys = [];
+    /** Optional metadata provider scoping this editor (multi-provider hosts); passed through to trigger providers. */
+    Provider = null;
+    /** Auto-focus the editor after view init (the composer default). Disable when embedded in forms. */
+    autoFocus = 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 = '';
+    /** The trigger char that opened the current mention dropdown */
+    activeTrigger = '@';
+    /**
+     * Monotonic sequence guarding the async suggestion fetch — a response only applies
+     * when no newer keystroke (or dropdown close) has superseded it.
+     */
+    suggestionRequestSeq = 0;
+    /** Cap on the suggestions displayed; passed to providers as `MaxResults`. */
+    static MaxSuggestions = 50;
+    /**
+     * The trigger providers this editor consults: the explicit `TriggerProviders` list
+     * when bound, otherwise ClassFactory discovery filtered by `ExcludedTriggerKeys`.
+     * Empty when `enableMentions` is off (or nothing is registered) — the editor then
+     * behaves as a plain text editor.
+     */
+    get activeProviders() {
+        if (!this.enableMentions) {
+            return [];
+        }
+        return this.TriggerProviders ?? DiscoverComposerTriggerProviders(this.ExcludedTriggerKeys);
+    }
+    /** Unique trigger characters across the active providers (priority order preserved). */
+    get mentionTriggers() {
+        const triggers = [];
+        for (const provider of this.activeProviders) {
+            if (!triggers.includes(provider.TriggerChar)) {
+                triggers.push(provider.TriggerChar);
+            }
+        }
+        return triggers;
+    }
+    onChange = () => { };
+    onTouched = () => { };
+    /** Value written via writeValue() before the view (editorRef) exists — applied in ngAfterViewInit. */
+    pendingWriteValue = null;
+    constructor(cdr) {
+        this.cdr = cdr;
+    }
+    async ngOnInit() {
+        // Warm up the active providers (best-effort — a provider that fails to warm
+        // simply serves its first real request cold).
+        if (this.enableMentions) {
+            const user = this.currentUser ?? null;
+            await Promise.all(this.activeProviders.map((p) => p.Initialize(user).catch(() => undefined)));
+        }
+    }
+    ngAfterViewInit() {
+        // Apply any value written through the ControlValueAccessor before the view existed
+        // (NgModel calls writeValue during directive init, before this component's view is ready)
+        if (this.pendingWriteValue !== null) {
+            this.setEditorContent(this.pendingWriteValue);
+            this.pendingWriteValue = null;
+        }
+        // Auto-focus the editor
+        if (this.autoFocus) {
+            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/command autocomplete via the active trigger providers
+        if (this.enableMentions) {
+            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/command trigger detection — finds the nearest active trigger char
+     * before the cursor and kicks off the (async) provider suggestion fetch.
+     */
+    handleMentionInput() {
+        const selection = window.getSelection();
+        if (!selection || selection.rangeCount === 0)
+            return;
+        const activeTriggers = this.mentionTriggers;
+        if (activeTriggers.length === 0) {
+            this.closeMentionDropdown();
+            return;
+        }
+        const range = selection.getRangeAt(0);
+        const textBeforeCursor = this.getTextBeforeCursor(range);
+        // Find the nearest active trigger char before the cursor — whichever is closest wins
+        let triggerIndex = -1;
+        let triggerChar = '@';
+        for (const t of activeTriggers) {
+            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;
+        // Fetch suggestions from the provider(s) owning this trigger (async, race-guarded)
+        void this.fetchSuggestions(triggerChar, textAfterTrigger);
+    }
+    /**
+     * Routes the suggestion request to every active provider whose TriggerChar matches,
+     * concatenates their results in priority order, caps the merged list, and opens the
+     * dropdown. A monotonic sequence drops stale responses when the user keeps typing.
+     */
+    async fetchSuggestions(triggerChar, query) {
+        const seq = ++this.suggestionRequestSeq;
+        const providers = this.activeProviders.filter((p) => p.TriggerChar === triggerChar);
+        const request = {
+            Query: query,
+            MaxResults: MentionEditorComponent.MaxSuggestions,
+            ContextUser: this.currentUser ?? null,
+            Provider: this.Provider
+        };
+        const resultSets = await Promise.all(providers.map((p) => p.GetSuggestions(request).catch(() => [])));
+        if (seq !== this.suggestionRequestSeq) {
+            return; // superseded by a newer keystroke or an explicit close
+        }
+        const merged = resultSets.flat().slice(0, MentionEditorComponent.MaxSuggestions);
+        this.mentionSuggestions = merged;
+        if (merged.length > 0) {
+            this.showMentionDropdown = true;
+            this.positionMentionDropdown();
+        }
+        else {
+            this.closeMentionDropdown();
+        }
+        this.cdr.detectChanges();
+    }
+    /**
+     * 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);
+        // Configuration presets ride along on the suggestion itself (supplied by the trigger
+        // provider — e.g. the agent-mentions provider maps AI Agent Configuration presets in).
+        // The composer has no knowledge of what a preset IS; it just stores the default's
+        // ID/Name on the chip and offers a picker when there are 2+.
+        const presets = suggestion.presets ?? [];
+        if (presets.length > 0) {
+            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. Skills carry their own accent Color
+        // (AISkill.Color UX metadata); when present it drives the chip, otherwise the standard skill
+        // green (--mj-status-success). Same color logic as the saved-message badge — keep in sync with
+        // message-item's renderMentionHTML.
+        const skillPalette = suggestion.type === 'skill'
+            ? { bg: suggestion.color || 'var(--mj-status-success)', border: 'rgba(255, 255, 255, 0.35)' }
+            : null;
+        const palette = skillPalette
+            ? skillPalette
+            : 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)' };
+        // Skills render as a sharp-cornered rectangle (vs. the rounded pill for agents/users/entities)
+        // — the shape is the at-a-glance differentiator. Same shape in the saved-message badge.
+        const chipRadius = suggestion.type === 'skill' ? '4px' : '16px';
+        chip.style.cssText = `
+      display: inline-flex;
+      align-items: center;
+      gap: 5px;
+      padding: 4px 12px;
+      margin: 0 3px;
+      border-radius: ${chipRadius};
+      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 if (suggestion.type === 'skill') {
+                icon.className = this.getIconClasses(suggestion.icon || 'fa-solid fa-wand-magic-sparkles');
+            }
+            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 when the suggestion carries 2+ presets
+        if (presets.length >= 2) {
+            this.addConfigurationDropdown(chip, presets);
+        }
+        return chip;
+    }
+    /**
+     * Add configuration preset dropdown to a mention 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() {
+        // Invalidate any in-flight suggestion fetch so a late response can't reopen the dropdown
+        this.suggestionRequestSeq++;
+        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' ? '#' : mentionType === 'skill' ? '/' : '@';
+                    // 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' ? '#' : mentionType === 'skill' ? '/' : '@';
+                    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) {
+        const editor = this.editorRef?.nativeElement;
+        if (!editor) {
+            // View not created yet — buffer the value; ngAfterViewInit applies it
+            this.pendingWriteValue = value ?? '';
+            return;
+        }
+        if (value) {
+            this.setEditorContent(value);
+        }
+        else {
+            editor.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(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", TriggerProviders: "TriggerProviders", ExcludedTriggerKeys: "ExcludedTriggerKeys", Provider: "Provider", autoFocus: "autoFocus", 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: [i1.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: i0.ChangeDetectorRef }], { editorRef: [{
+            type: ViewChild,
+            args: ['editor', { static: false }]
+        }], placeholder: [{
+            type: Input
+        }], disabled: [{
+            type: Input
+        }], currentUser: [{
+            type: Input
+        }], enableMentions: [{
+            type: Input
+        }], TriggerProviders: [{
+            type: Input
+        }], ExcludedTriggerKeys: [{
+            type: Input
+        }], Provider: [{
+            type: Input
+        }], autoFocus: [{
+            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: 72 }); })();
+//# sourceMappingURL=mention-editor.component.js.map