Member Junction
    Preparing search index...

    Class MentionEditorComponent

    ContentEditable-based mention editor with visual chips/pills Provides Slack/Teams-style mention UX with immutable mention tokens

    Implements

    • OnInit
    • AfterViewInit
    • ControlValueAccessor
    Index

    Constructors

    constructor

    Properties

    acceptedFileTypes attachmentClicked attachmentError attachmentsChanged autoFocus currentUser? disabled editorBlurred editorRef enableAttachments enableMentions enterPressed ExcludedTriggerKeys isDragOver maxAttachments maxAttachmentSizeBytes mentionDropdownPosition mentionDropdownShowAbove mentionSelected mentionSuggestions onTouched pendingAttachments placeholder Provider showMentionDropdown TriggerProviders valueChange

    Accessors

    HasFocus

    Methods

    AddArtifactAttachment clear clearPendingAttachments closeMentionDropdown focus FocusCaretAtEnd getMentionChipsData getPendingAttachments getPlainTextWithJsonMentions hasAttachments InsertMention ngAfterViewInit ngOnInit onAttachmentClick onBlur onContainerClick onDragLeave onDragOver onDrop onFileSelected onInput onKeyDown onMentionSelected onPaste openFilePicker registerOnChange registerOnTouched removeAttachment setDisabledState writeValue ParseSerializedMentions

    Constructors

    Properties

    acceptedFileTypes: string = 'image/*'
    attachmentClicked: EventEmitter<PendingAttachment> = ...
    attachmentError: EventEmitter<string> = ...
    attachmentsChanged: EventEmitter<PendingAttachment[]> = ...
    autoFocus: boolean = true

    Auto-focus the editor after view init (the composer default). Disable when embedded in forms.

    currentUser?: UserInfo
    disabled: boolean = false
    editorBlurred: EventEmitter<void> = ...

    Fires when the contenteditable loses focus (hosts persist drafts on this).

    editorRef: ElementRef<HTMLDivElement>
    enableAttachments: boolean = true
    enableMentions: boolean = true

    Master switch for all mention/command triggers. When false no providers are consulted.

    enterPressed: EventEmitter<string> = ...
    ExcludedTriggerKeys: string[] = []

    Discovery-mode filter: providers whose stable Key appears here are skipped when resolving registered providers. Ignored when TriggerProviders is bound.

    isDragOver: boolean = false
    maxAttachments: number = 10
    maxAttachmentSizeBytes: number = ...
    mentionDropdownPosition: { left: number; top: number } = ...
    mentionDropdownShowAbove: boolean = false
    mentionSelected: EventEmitter<MentionSuggestion> = ...
    mentionSuggestions: MentionSuggestion[] = []
    onTouched: () => void = ...
    pendingAttachments: PendingAttachment[] = []
    placeholder: string = 'Type @ to mention agents or users, # for entities...'
    Provider: IMetadataProvider | null = null

    Optional metadata provider scoping this editor (multi-provider hosts); passed through to trigger providers.

    showMentionDropdown: boolean = false
    TriggerProviders: ComposerTriggerProvider[] | null = null

    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>').

    valueChange: EventEmitter<string> = ...

    Accessors

    Methods

    • Add an artifact as a pending attachment programmatically. Used by the artifact picker to attach artifacts as conversation inputs.

      Parameters

      • artifact: {
            artifactVersionId?: string;
            fileID: string;
            fileName: string;
            mimeType: string;
            sizeBytes: number;
        }

      Returns PendingAttachment

    • Extract mention chips with their configuration data Returns array of objects containing mention info and preset configuration

      Returns {
          id: string;
          name: string;
          presetId?: string;
          presetName?: string;
          type: string;
      }[]

    • 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"}

      Returns string

    • A callback method that is invoked immediately after Angular has completed initialization of a component's view. It is invoked only once when the view is instantiated.

      Returns void

    • A callback method that is invoked immediately after the default change detector has checked the directive's data-bound properties for the first time, and before any of the view or content children have been checked. It is invoked only once when the directive is instantiated.

      Returns Promise<void>

    • Parameters

      • fn: (value: string) => void

        The callback function to register

      Returns void

      Registers a callback function that is called when the control's value changes in the UI.

      This method is called by the forms API on initialization to update the form model when values propagate from the view to the model.

      When implementing the registerOnChange method in your own value accessor, save the given function so your class calls it at the appropriate time.

      The following example stores the provided function as an internal method.

      registerOnChange(fn: (_: any) => void): void {
        this._onChange = fn;
      }

      When the value changes in the UI, call the registered function to allow the forms API to update itself:

      host: {
         '(change)': '_onChange($event.target.value)'
      }

    • Parameters

      • fn: () => void

        The callback function to register

      Returns void

      Registers a callback function that is called by the forms API on initialization to update the form model on blur.

      When implementing registerOnTouched in your own value accessor, save the given function so your class calls it when the control should be considered blurred or "touched".

      The following example stores the provided function as an internal method.

      registerOnTouched(fn: any): void {
        this._onTouched = fn;
      }

      On blur (or equivalent), your class should call the registered function to allow the forms API to update itself:

      host: {
         '(blur)': '_onTouched()'
      }

    • Parameters

      • isDisabled: boolean

        The disabled status to set on the element

      Returns void

      Function that is called by the forms API when the control status changes to or from 'DISABLED'. Depending on the status, it enables or disables the appropriate DOM element.

      The following is an example of writing the disabled property to a native DOM element:

      setDisabledState(isDisabled: boolean): void {
        this._renderer.setProperty(this._elementRef.nativeElement, 'disabled', isDisabled);
      }

    • Parameters

      • value: string

      Returns void

      Writes a new value to the element.

      This method is called by the forms API to write to the view when programmatic changes from model to view are requested.

      The following example writes a value to the native DOM element.

      writeValue(value: any): void {
        this._renderer.setProperty(this._elementRef.nativeElement, 'value', value);
      }

    • Splits text containing serialized mention tokens into plain-string segments and parsed mention segments. Token = '@' followed by a JSON object with at least {type,id,name}; brace matching is string-aware so names containing braces or escaped quotes parse correctly. Malformed candidates stay as literal text.

      Parameters

      • text: string

      Returns (string | { config?: string; configId?: string; suggestion: MentionSuggestion })[]

    Settings

    Member Visibility

    On This Page

    Constructors
    Properties
    Accessors
    Methods