@memberjunction/ng-composer 6.1.0-edge.1 → 6.1.0-edge.2

package/dist/lib/components/message/message-input-box.component.js

@@ -1,61 +1,77 @@
 import { Component, Input, Output, EventEmitter, ViewChild } from '@angular/core';
+import { BeforeSkillsOpenedEventArgs } from '../../events/composer-events';
 import * as i0 from "@angular/core";
 import * as i1 from "@angular/forms";
 import * as i2 from "../mention/mention-editor.component";
 const _c0 = ["mentionEditor"];
 function MessageInputBoxComponent_Conditional_4_Conditional_1_Template(rf, ctx) { if (rf & 1) {
     const _r2 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 9);
-    i0.ɵɵlistener("click", function MessageInputBoxComponent_Conditional_4_Conditional_1_Template_button_click_0_listener($event) { i0.ɵɵrestoreView(_r2); const ctx_r2 = i0.ɵɵnextContext(2); ctx_r2.planModeToggle.emit(); return i0.ɵɵresetView($event.stopPropagation()); });
-    i0.ɵɵelement(1, "i", 10);
+    i0.ɵɵelementStart(0, "button", 10);
+    i0.ɵɵlistener("mousedown", function MessageInputBoxComponent_Conditional_4_Conditional_1_Template_button_mousedown_0_listener($event) { i0.ɵɵrestoreView(_r2); $event.preventDefault(); return i0.ɵɵresetView($event.stopPropagation()); })("click", function MessageInputBoxComponent_Conditional_4_Conditional_1_Template_button_click_0_listener($event) { i0.ɵɵrestoreView(_r2); const ctx_r2 = i0.ɵɵnextContext(2); ctx_r2.OnSkillsClick($event); return i0.ɵɵresetView($event.stopPropagation()); });
+    i0.ɵɵelement(1, "i", 11);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(2);
-    i0.ɵɵclassProp("plan-mode-button-icon--active", ctx_r2.planModeActive);
-    i0.ɵɵproperty("disabled", ctx_r2.disabled)("title", ctx_r2.planModeActive ? "Plan Mode ON \u2014 the agent presents a plan for your approval before it acts" : "Plan Mode: have the agent present a plan for your approval before it acts");
-    i0.ɵɵattribute("aria-pressed", ctx_r2.planModeActive);
+    i0.ɵɵclassProp("skills-button-icon--active", ctx_r2.SkillsActive);
+    i0.ɵɵproperty("disabled", ctx_r2.Disabled);
+    i0.ɵɵattribute("aria-expanded", ctx_r2.SkillsActive);
 } }
 function MessageInputBoxComponent_Conditional_4_Conditional_2_Template(rf, ctx) { if (rf & 1) {
     const _r4 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 11);
-    i0.ɵɵlistener("click", function MessageInputBoxComponent_Conditional_4_Conditional_2_Template_button_click_0_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r2 = i0.ɵɵnextContext(2); ctx_r2.openFilePicker(); return i0.ɵɵresetView($event.stopPropagation()); });
-    i0.ɵɵelement(1, "i", 12);
+    i0.ɵɵelementStart(0, "button", 12);
+    i0.ɵɵlistener("click", function MessageInputBoxComponent_Conditional_4_Conditional_2_Template_button_click_0_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r2 = i0.ɵɵnextContext(2); ctx_r2.PlanModeToggle.emit(); return i0.ɵɵresetView($event.stopPropagation()); });
+    i0.ɵɵelement(1, "i", 13);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(2);
-    i0.ɵɵproperty("disabled", ctx_r2.disabled);
+    i0.ɵɵclassProp("plan-mode-button-icon--active", ctx_r2.PlanModeActive);
+    i0.ɵɵproperty("disabled", ctx_r2.Disabled)("title", ctx_r2.PlanModeActive ? "Plan Mode ON \u2014 the agent presents a plan for your approval before it acts" : "Plan Mode: have the agent present a plan for your approval before it acts");
+    i0.ɵɵattribute("aria-pressed", ctx_r2.PlanModeActive);
 } }
 function MessageInputBoxComponent_Conditional_4_Conditional_3_Template(rf, ctx) { if (rf & 1) {
     const _r5 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 13);
-    i0.ɵɵlistener("click", function MessageInputBoxComponent_Conditional_4_Conditional_3_Template_button_click_0_listener($event) { i0.ɵɵrestoreView(_r5); const ctx_r2 = i0.ɵɵnextContext(2); ctx_r2.onRealtimeClick(); return i0.ɵɵresetView($event.stopPropagation()); });
-    i0.ɵɵelement(1, "i", 14);
+    i0.ɵɵelementStart(0, "button", 14);
+    i0.ɵɵlistener("click", function MessageInputBoxComponent_Conditional_4_Conditional_3_Template_button_click_0_listener($event) { i0.ɵɵrestoreView(_r5); const ctx_r2 = i0.ɵɵnextContext(2); ctx_r2.OpenFilePicker(); return i0.ɵɵresetView($event.stopPropagation()); });
+    i0.ɵɵelement(1, "i", 15);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(2, "button", 15);
-    i0.ɵɵlistener("click", function MessageInputBoxComponent_Conditional_4_Conditional_3_Template_button_click_2_listener($event) { i0.ɵɵrestoreView(_r5); const ctx_r2 = i0.ɵɵnextContext(2); ctx_r2.onRealtimeOptionsClick(); return i0.ɵɵresetView($event.stopPropagation()); });
-    i0.ɵɵelement(3, "i", 16);
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext(2);
+    i0.ɵɵproperty("disabled", ctx_r2.Disabled);
+} }
+function MessageInputBoxComponent_Conditional_4_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    const _r6 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 16);
+    i0.ɵɵlistener("click", function MessageInputBoxComponent_Conditional_4_Conditional_4_Template_button_click_0_listener($event) { i0.ɵɵrestoreView(_r6); const ctx_r2 = i0.ɵɵnextContext(2); ctx_r2.OnRealtimeClick(); return i0.ɵɵresetView($event.stopPropagation()); });
+    i0.ɵɵelement(1, "i", 17);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(2, "button", 18);
+    i0.ɵɵlistener("click", function MessageInputBoxComponent_Conditional_4_Conditional_4_Template_button_click_2_listener($event) { i0.ɵɵrestoreView(_r6); const ctx_r2 = i0.ɵɵnextContext(2); ctx_r2.OnRealtimeOptionsClick(); return i0.ɵɵresetView($event.stopPropagation()); });
+    i0.ɵɵelement(3, "i", 19);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(2);
-    i0.ɵɵclassProp("voice-button-icon--active", ctx_r2.voiceActive);
-    i0.ɵɵproperty("disabled", !ctx_r2.canStartRealtime)("title", ctx_r2.voiceActive ? "Voice call active" : "Start a voice call");
+    i0.ɵɵclassProp("voice-button-icon--active", ctx_r2.VoiceActive);
+    i0.ɵɵproperty("disabled", !ctx_r2.CanStartRealtime)("title", ctx_r2.VoiceActive ? "Voice call active" : "Start a voice call");
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("disabled", !ctx_r2.canStartRealtime);
+    i0.ɵɵproperty("disabled", !ctx_r2.CanStartRealtime);
 } }
 function MessageInputBoxComponent_Conditional_4_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 4);
-    i0.ɵɵconditionalCreate(1, MessageInputBoxComponent_Conditional_4_Conditional_1_Template, 2, 5, "button", 7);
-    i0.ɵɵconditionalCreate(2, MessageInputBoxComponent_Conditional_4_Conditional_2_Template, 2, 1, "button", 8);
-    i0.ɵɵconditionalCreate(3, MessageInputBoxComponent_Conditional_4_Conditional_3_Template, 4, 5);
+    i0.ɵɵconditionalCreate(1, MessageInputBoxComponent_Conditional_4_Conditional_1_Template, 2, 4, "button", 7);
+    i0.ɵɵconditionalCreate(2, MessageInputBoxComponent_Conditional_4_Conditional_2_Template, 2, 5, "button", 8);
+    i0.ɵɵconditionalCreate(3, MessageInputBoxComponent_Conditional_4_Conditional_3_Template, 2, 1, "button", 9);
+    i0.ɵɵconditionalCreate(4, MessageInputBoxComponent_Conditional_4_Conditional_4_Template, 4, 5);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext();
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r2.enablePlanMode ? 1 : -1);
+    i0.ɵɵconditional(ctx_r2.EnableSkills ? 1 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r2.enableAttachments ? 2 : -1);
+    i0.ɵɵconditional(ctx_r2.EnablePlanMode ? 2 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r2.enableRealtime ? 3 : -1);
+    i0.ɵɵconditional(ctx_r2.EnableAttachments ? 3 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r2.EnableRealtime ? 4 : -1);
 } }
 /**
  * Reusable message input box component (presentational)
@@ -74,99 +90,179 @@ function MessageInputBoxComponent_Conditional_4_Template(rf, ctx) { if (rf & 1)
  */
 export class MessageInputBoxComponent {
     mentionEditor;
-    placeholder = 'Type your message to start a new conversation...';
-    disabled = false;
-    value = '';
-    showCharacterCount = false;
+    Placeholder = 'Type your message to start a new conversation...';
+    Disabled = false;
+    Value = '';
+    ShowCharacterCount = false;
     /** Master switch for all mention/command triggers (pass-through to the mention editor). */
-    enableMentions = true;
+    EnableMentions = true;
     /** Explicit trigger-provider list (pass-through to the mention editor; explicit list wins over discovery). */
     TriggerProviders = null;
     /** Discovery-mode filter: provider Keys to skip (pass-through to the mention editor). */
     ExcludedTriggerKeys = [];
     /** Optional metadata provider scoping this composer (pass-through to the mention editor). */
     Provider = null;
-    currentUser;
-    rows = 3;
+    CurrentUser;
+    Rows = 3;
     // Attachment settings
-    enableAttachments = true;
-    maxAttachments = 10;
-    maxAttachmentSizeBytes = 20 * 1024 * 1024; // 20MB
-    acceptedFileTypes = 'image/*';
+    EnableAttachments = true;
+    MaxAttachments = 10;
+    MaxAttachmentSizeBytes = 20 * 1024 * 1024; // 20MB
+    AcceptedFileTypes = 'image/*';
     /** Shows the in-composer mic button when true. */
-    enableRealtime = false;
+    EnableRealtime = false;
     /** Whether a realtime voice session is currently active (mic renders in its active state). */
-    voiceActive = false;
-    /** Whether a voice session can be started right now (mic disabled when false). */
-    canStartRealtime = true;
+    VoiceActive = false;
+    /** Whether a voice session can be started right now (mic Disabled when false). */
+    CanStartRealtime = true;
     /** Shows the in-composer Plan Mode toggle button when true. */
-    enablePlanMode = false;
+    EnablePlanMode = false;
     /** Current Plan Mode toggle state (renders the button in its active state). */
-    planModeActive = false;
+    PlanModeActive = false;
+    /**
+     * Shows the in-composer Skills button when true.
+     *
+     * Gated separately from `EnableMentions` because a host can have the `/` trigger active and
+     * still not want the button — but the common case is that a composer offering skill commands
+     * should advertise them, since `/` is otherwise invisible.
+     */
+    EnableSkills = false;
+    /**
+     * True while the skill dropdown is open, driving the button's expanded state.
+     *
+     * Note the ARIA differs from Plan Mode next to it, deliberately: Plan Mode is a toggle BUTTON
+     * (a mode that stays on), so `aria-pressed` is right there. This one opens a popup, so it is
+     * `aria-expanded` + `aria-haspopup`. Using `aria-pressed` here would have a screen reader
+     * announce "pressed" for something that actually just revealed a list.
+     *
+     * DERIVED, not an @Input, and this is the difference from Plan Mode. Plan Mode's active state is
+     * a persisted user preference the host owns and threads down. "Is the skill dropdown open" is
+     * intrinsic to this composer, so an @Input would be an API the host cannot meaningfully answer
+     * and would leave the button permanently unpressed if nobody bound it.
+     */
+    get SkillsActive() {
+        return this.mentionEditor?.IsTriggerOpen('/') ?? false;
+    }
     /** Composer lost focus — hosts persist drafts on this. */
-    blurred = new EventEmitter();
-    textSubmitted = new EventEmitter();
-    valueChange = new EventEmitter();
-    attachmentsChanged = new EventEmitter();
-    attachmentError = new EventEmitter();
-    attachmentClicked = new EventEmitter();
+    Blurred = new EventEmitter();
+    TextSubmitted = new EventEmitter();
+    ValueChange = new EventEmitter();
+    AttachmentsChanged = new EventEmitter();
+    AttachmentError = new EventEmitter();
+    AttachmentClicked = new EventEmitter();
     /** Emitted when the user clicks the mic button to start/stop a voice session. */
-    voiceRequested = new EventEmitter();
+    VoiceRequested = new EventEmitter();
     /**
      * Emitted when the user clicks the small caret next to the phone button — the host opens the
      * voice agent/model picker so call options (which agent, which voice model) stay reachable
      * without adding friction to the plain phone click's instant-start path.
      */
-    voiceOptionsRequested = new EventEmitter();
+    VoiceOptionsRequested = new EventEmitter();
     /** Emitted when the user clicks the in-composer Plan Mode toggle button. */
-    planModeToggle = new EventEmitter();
-    onRealtimeClick() {
-        this.voiceRequested.emit();
+    PlanModeToggle = new EventEmitter();
+    /**
+     * Fired BEFORE the Skills button opens the dropdown. Flip `Cancel` to veto — a host gating
+     * skills by entitlement, or surfacing them elsewhere, blocks it here.
+     *
+     * A pair rather than a lone emitter because this is an ACTION a host might reasonably refuse
+     * (UI_LAYERING_GUIDE section 6, rule 1). Handlers must be synchronous; `Cancel` travels back
+     * through EventEmitter's synchronous dispatch.
+     */
+    BeforeSkillsOpened = new EventEmitter();
+    /**
+     * Fired AFTER the dropdown actually opened. Not emitted on the canceled path, and not emitted
+     * when no active provider owns the trigger — so a host counting this counts dropdowns the user
+     * saw, rather than clicks.
+     */
+    AfterSkillsOpened = new EventEmitter();
+    /**
+     * Open the skill-command dropdown, the same one `/` opens.
+     *
+     * Routed through the editor's OpenTrigger rather than a parallel menu so permission filtering,
+     * per-skill icons and chip insertion all stay in one implementation.
+     */
+    /**
+     * NOTE: the template pairs this with
+     * `(mousedown)="$event.preventDefault(); $event.stopPropagation()"`, and BOTH halves are
+     * load-bearing.
+     *
+     * `preventDefault` — a <button> takes focus on mousedown, which blurs the editor, and the editor
+     * closes its dropdown 200ms after losing focus. Without it the menu opened and then shut itself.
+     *
+     * `stopPropagation` — the editor's click-away listener is on `document:mousedown` and exempts only
+     * presses inside the EDITOR's host. This button is a sibling of `<mj-mention-editor>`, so a press
+     * on it read as an outside press: mousedown closed the dropdown, then click saw `SkillsActive`
+     * already false and reopened it. The menu blinked, could not be dismissed by the button that
+     * opened it, and the Before/After pair fired on every click — the exact over-counting the toggle
+     * branch below exists to prevent. Stopping propagation states that this press belongs to the
+     * dropdown machinery.
+     */
+    OnSkillsClick(event) {
+        // Toggle closed first. A disclosure button has to be able to close what it opened, and without
+        // this a second click re-ran the open path: it re-emitted the Before/After pair (so a host
+        // counting opens over-counted) and re-captured the trigger's baseline at the new caret, which
+        // corrupts the query offset once anything has been typed.
+        if (this.SkillsActive) {
+            this.mentionEditor?.closeMentionDropdown();
+            return;
+        }
+        const args = new BeforeSkillsOpenedEventArgs();
+        this.BeforeSkillsOpened.emit(args);
+        if (args.Cancel) {
+            return;
+        }
+        const anchor = event?.currentTarget ?? null;
+        if (this.mentionEditor?.OpenTrigger('/', anchor)) {
+            this.AfterSkillsOpened.emit();
+        }
+    }
+    OnRealtimeClick() {
+        this.VoiceRequested.emit();
     }
-    onRealtimeOptionsClick() {
-        this.voiceOptionsRequested.emit();
+    OnRealtimeOptionsClick() {
+        this.VoiceOptionsRequested.emit();
     }
-    get canSend() {
-        const hasText = this.value.trim().length > 0;
+    get CanSend() {
+        const hasText = this.Value.trim().length > 0;
         const hasAttachments = this.mentionEditor?.hasAttachments() || false;
-        return !this.disabled && (hasText || hasAttachments);
+        return !this.Disabled && (hasText || hasAttachments);
     }
     /**
-     * Handle value changes from MentionEditorComponent
+     * Handle Value changes from MentionEditorComponent
      */
-    onValueChange(newValue) {
-        this.value = newValue;
-        this.valueChange.emit(this.value);
+    OnValueChange(newValue) {
+        this.Value = newValue;
+        this.ValueChange.emit(this.Value);
     }
     /**
      * Handle attachment changes from MentionEditorComponent
      */
-    onAttachmentsChanged(attachments) {
-        this.attachmentsChanged.emit(attachments);
+    OnAttachmentsChanged(attachments) {
+        this.AttachmentsChanged.emit(attachments);
     }
     /**
      * Handle attachment errors from MentionEditorComponent
      */
-    onAttachmentError(error) {
-        this.attachmentError.emit(error);
+    OnAttachmentError(error) {
+        this.AttachmentError.emit(error);
     }
     /**
      * Handle attachment click from MentionEditorComponent
      */
-    onAttachmentClicked(attachment) {
-        this.attachmentClicked.emit(attachment);
+    OnAttachmentClicked(attachment) {
+        this.AttachmentClicked.emit(attachment);
     }
     /**
      * Handle Enter key from MentionEditorComponent
      * Extracts plain text with JSON-encoded mentions for message submission
      */
-    onEnterPressed(_text) {
-        this.onSendClick();
+    OnEnterPressed(_text) {
+        this.OnSendClick();
     }
     /**
      * Handle mention selection from MentionEditorComponent
      */
-    onMentionSelected(suggestion) {
+    OnMentionSelected(suggestion) {
         // MentionEditorComponent already inserts the mention chip
         // This is just for additional tracking/analytics if needed
     }
@@ -174,24 +270,24 @@ export class MessageInputBoxComponent {
      * Send the message
      * Extracts plain text with JSON-encoded mentions for proper persistence
      */
-    onSendClick() {
-        if (this.canSend) {
+    OnSendClick() {
+        if (this.CanSend) {
             // Get plain text with JSON-encoded mentions (preserves configuration info)
-            const textToSend = this.mentionEditor?.getPlainTextWithJsonMentions() || this.value.trim();
-            this.textSubmitted.emit(textToSend);
-            this.value = ''; // Clear input after sending
+            const textToSend = this.mentionEditor?.getPlainTextWithJsonMentions() || this.Value.trim();
+            this.TextSubmitted.emit(textToSend);
+            this.Value = ''; // Clear input after sending
             // Clear the editor content
             if (this.mentionEditor) {
                 this.mentionEditor.clear();
             }
-            this.valueChange.emit(this.value);
+            this.ValueChange.emit(this.Value);
         }
     }
     /**
      * Handle clicks on the container - focus the mention editor
      * Only moves cursor to end if clicking outside the contentEditable area
      */
-    onContainerClick(event) {
+    OnContainerClick(event) {
         const target = event.target;
         // Don't handle clicks on the send button
         if (target.closest('.send-button-icon')) {
@@ -235,19 +331,19 @@ export class MessageInputBoxComponent {
     /**
      * Get mention chip data including configuration presets
      */
-    getMentionChipsData() {
+    GetMentionChipsData() {
         return this.mentionEditor?.getMentionChipsData() || [];
     }
     /**
      * Get pending attachments from the editor
      */
-    getPendingAttachments() {
+    GetPendingAttachments() {
         return this.mentionEditor?.getPendingAttachments() || [];
     }
     /**
      * Open file picker programmatically
      */
-    openFilePicker() {
+    OpenFilePicker() {
         this.mentionEditor?.openFilePicker();
     }
     /**
@@ -262,44 +358,44 @@ export class MessageInputBoxComponent {
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.mentionEditor = _t.first);
-        } }, inputs: { placeholder: "placeholder", disabled: "disabled", value: "value", showCharacterCount: "showCharacterCount", enableMentions: "enableMentions", TriggerProviders: "TriggerProviders", ExcludedTriggerKeys: "ExcludedTriggerKeys", Provider: "Provider", currentUser: "currentUser", rows: "rows", enableAttachments: "enableAttachments", maxAttachments: "maxAttachments", maxAttachmentSizeBytes: "maxAttachmentSizeBytes", acceptedFileTypes: "acceptedFileTypes", enableRealtime: "enableRealtime", voiceActive: "voiceActive", canStartRealtime: "canStartRealtime", enablePlanMode: "enablePlanMode", planModeActive: "planModeActive" }, outputs: { blurred: "blurred", textSubmitted: "textSubmitted", valueChange: "valueChange", attachmentsChanged: "attachmentsChanged", attachmentError: "attachmentError", attachmentClicked: "attachmentClicked", voiceRequested: "voiceRequested", voiceOptionsRequested: "voiceOptionsRequested", planModeToggle: "planModeToggle" }, standalone: false, decls: 7, vars: 14, consts: [["mentionEditor", ""], [1, "message-input-box-container", 3, "click"], [1, "input-wrapper"], [3, "ngModelChange", "valueChange", "enterPressed", "mentionSelected", "attachmentsChanged", "attachmentError", "attachmentClicked", "editorBlurred", "placeholder", "disabled", "currentUser", "enableMentions", "TriggerProviders", "ExcludedTriggerKeys", "Provider", "enableAttachments", "maxAttachments", "maxAttachmentSizeBytes", "acceptedFileTypes", "ngModel"], [1, "attach-buttons"], ["title", "Send message (Enter)", 1, "send-button-icon", 3, "click", "disabled"], [1, "fa-solid", "fa-paper-plane"], ["aria-label", "Toggle Plan Mode", 1, "attach-button-icon", "plan-mode-button-icon", 3, "plan-mode-button-icon--active", "disabled", "title"], ["title", "Attach file", 1, "attach-button-icon", 3, "disabled"], ["aria-label", "Toggle Plan Mode", 1, "attach-button-icon", "plan-mode-button-icon", 3, "click", "disabled", "title"], ["aria-hidden", "true", 1, "fa-solid", "fa-route"], ["title", "Attach file", 1, "attach-button-icon", 3, "click", "disabled"], [1, "fa-solid", "fa-paperclip"], ["aria-label", "Start a voice call", 1, "attach-button-icon", "voice-button-icon", 3, "click", "disabled", "title"], ["aria-hidden", "true", 1, "fa-solid", "fa-phone"], ["title", "Voice call options (choose agent and voice model)", "aria-label", "Voice call options", 1, "attach-button-icon", "voice-options-button-icon", 3, "click", "disabled"], ["aria-hidden", "true", 1, "fa-solid", "fa-chevron-down"]], template: function MessageInputBoxComponent_Template(rf, ctx) { if (rf & 1) {
+        } }, inputs: { Placeholder: "Placeholder", Disabled: "Disabled", Value: "Value", ShowCharacterCount: "ShowCharacterCount", EnableMentions: "EnableMentions", TriggerProviders: "TriggerProviders", ExcludedTriggerKeys: "ExcludedTriggerKeys", Provider: "Provider", CurrentUser: "CurrentUser", Rows: "Rows", EnableAttachments: "EnableAttachments", MaxAttachments: "MaxAttachments", MaxAttachmentSizeBytes: "MaxAttachmentSizeBytes", AcceptedFileTypes: "AcceptedFileTypes", EnableRealtime: "EnableRealtime", VoiceActive: "VoiceActive", CanStartRealtime: "CanStartRealtime", EnablePlanMode: "EnablePlanMode", PlanModeActive: "PlanModeActive", EnableSkills: "EnableSkills" }, outputs: { Blurred: "Blurred", TextSubmitted: "TextSubmitted", ValueChange: "ValueChange", AttachmentsChanged: "AttachmentsChanged", AttachmentError: "AttachmentError", AttachmentClicked: "AttachmentClicked", VoiceRequested: "VoiceRequested", VoiceOptionsRequested: "VoiceOptionsRequested", PlanModeToggle: "PlanModeToggle", BeforeSkillsOpened: "BeforeSkillsOpened", AfterSkillsOpened: "AfterSkillsOpened" }, standalone: false, decls: 7, vars: 14, consts: [["mentionEditor", ""], [1, "message-input-box-container", 3, "click"], [1, "input-wrapper"], [3, "ngModelChange", "valueChange", "enterPressed", "mentionSelected", "attachmentsChanged", "attachmentError", "attachmentClicked", "editorBlurred", "placeholder", "disabled", "currentUser", "enableMentions", "TriggerProviders", "ExcludedTriggerKeys", "Provider", "enableAttachments", "maxAttachments", "maxAttachmentSizeBytes", "acceptedFileTypes", "ngModel"], [1, "attach-buttons"], ["title", "Send message (Enter)", 1, "send-button-icon", 3, "click", "disabled"], [1, "fa-solid", "fa-paper-plane"], ["aria-haspopup", "true", "title", "Skills, or type / in the message box", "aria-label", "Show skills", 1, "attach-button-icon", "skills-button-icon", 3, "skills-button-icon--active", "disabled"], ["aria-label", "Toggle Plan Mode", 1, "attach-button-icon", "plan-mode-button-icon", 3, "plan-mode-button-icon--active", "disabled", "title"], ["title", "Attach file", 1, "attach-button-icon", 3, "disabled"], ["aria-haspopup", "true", "title", "Skills, or type / in the message box", "aria-label", "Show skills", 1, "attach-button-icon", "skills-button-icon", 3, "mousedown", "click", "disabled"], ["aria-hidden", "true", 1, "fa-solid", "fa-wand-magic-sparkles"], ["aria-label", "Toggle Plan Mode", 1, "attach-button-icon", "plan-mode-button-icon", 3, "click", "disabled", "title"], ["aria-hidden", "true", 1, "fa-solid", "fa-route"], ["title", "Attach file", 1, "attach-button-icon", 3, "click", "disabled"], [1, "fa-solid", "fa-paperclip"], ["aria-label", "Start a voice call", 1, "attach-button-icon", "voice-button-icon", 3, "click", "disabled", "title"], ["aria-hidden", "true", 1, "fa-solid", "fa-phone"], ["title", "Voice call options (choose agent and voice model)", "aria-label", "Voice call options", 1, "attach-button-icon", "voice-options-button-icon", 3, "click", "disabled"], ["aria-hidden", "true", 1, "fa-solid", "fa-chevron-down"]], template: function MessageInputBoxComponent_Template(rf, ctx) { if (rf & 1) {
             const _r1 = i0.ɵɵgetCurrentView();
             i0.ɵɵelementStart(0, "div", 1);
-            i0.ɵɵlistener("click", function MessageInputBoxComponent_Template_div_click_0_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onContainerClick($event)); });
+            i0.ɵɵlistener("click", function MessageInputBoxComponent_Template_div_click_0_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.OnContainerClick($event)); });
             i0.ɵɵelementStart(1, "div", 2)(2, "mj-mention-editor", 3, 0);
-            i0.ɵɵtwoWayListener("ngModelChange", function MessageInputBoxComponent_Template_mj_mention_editor_ngModelChange_2_listener($event) { i0.ɵɵrestoreView(_r1); i0.ɵɵtwoWayBindingSet(ctx.value, $event) || (ctx.value = $event); return i0.ɵɵresetView($event); });
-            i0.ɵɵlistener("valueChange", function MessageInputBoxComponent_Template_mj_mention_editor_valueChange_2_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onValueChange($event)); })("enterPressed", function MessageInputBoxComponent_Template_mj_mention_editor_enterPressed_2_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onEnterPressed($event)); })("mentionSelected", function MessageInputBoxComponent_Template_mj_mention_editor_mentionSelected_2_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onMentionSelected($event)); })("attachmentsChanged", function MessageInputBoxComponent_Template_mj_mention_editor_attachmentsChanged_2_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onAttachmentsChanged($event)); })("attachmentError", function MessageInputBoxComponent_Template_mj_mention_editor_attachmentError_2_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onAttachmentError($event)); })("attachmentClicked", function MessageInputBoxComponent_Template_mj_mention_editor_attachmentClicked_2_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onAttachmentClicked($event)); })("editorBlurred", function MessageInputBoxComponent_Template_mj_mention_editor_editorBlurred_2_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.blurred.emit()); });
+            i0.ɵɵtwoWayListener("ngModelChange", function MessageInputBoxComponent_Template_mj_mention_editor_ngModelChange_2_listener($event) { i0.ɵɵrestoreView(_r1); i0.ɵɵtwoWayBindingSet(ctx.Value, $event) || (ctx.Value = $event); return i0.ɵɵresetView($event); });
+            i0.ɵɵlistener("valueChange", function MessageInputBoxComponent_Template_mj_mention_editor_valueChange_2_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.OnValueChange($event)); })("enterPressed", function MessageInputBoxComponent_Template_mj_mention_editor_enterPressed_2_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.OnEnterPressed($event)); })("mentionSelected", function MessageInputBoxComponent_Template_mj_mention_editor_mentionSelected_2_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.OnMentionSelected($event)); })("attachmentsChanged", function MessageInputBoxComponent_Template_mj_mention_editor_attachmentsChanged_2_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.OnAttachmentsChanged($event)); })("attachmentError", function MessageInputBoxComponent_Template_mj_mention_editor_attachmentError_2_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.OnAttachmentError($event)); })("attachmentClicked", function MessageInputBoxComponent_Template_mj_mention_editor_attachmentClicked_2_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.OnAttachmentClicked($event)); })("editorBlurred", function MessageInputBoxComponent_Template_mj_mention_editor_editorBlurred_2_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.Blurred.emit()); });
             i0.ɵɵelementEnd();
-            i0.ɵɵconditionalCreate(4, MessageInputBoxComponent_Conditional_4_Template, 4, 3, "div", 4);
+            i0.ɵɵconditionalCreate(4, MessageInputBoxComponent_Conditional_4_Template, 5, 4, "div", 4);
             i0.ɵɵelementStart(5, "button", 5);
-            i0.ɵɵlistener("click", function MessageInputBoxComponent_Template_button_click_5_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onSendClick()); });
+            i0.ɵɵlistener("click", function MessageInputBoxComponent_Template_button_click_5_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.OnSendClick()); });
             i0.ɵɵelement(6, "i", 6);
             i0.ɵɵelementEnd()()();
         } if (rf & 2) {
             i0.ɵɵadvance(2);
-            i0.ɵɵproperty("placeholder", ctx.placeholder)("disabled", ctx.disabled)("currentUser", ctx.currentUser)("enableMentions", ctx.enableMentions)("TriggerProviders", ctx.TriggerProviders)("ExcludedTriggerKeys", ctx.ExcludedTriggerKeys)("Provider", ctx.Provider)("enableAttachments", ctx.enableAttachments)("maxAttachments", ctx.maxAttachments)("maxAttachmentSizeBytes", ctx.maxAttachmentSizeBytes)("acceptedFileTypes", ctx.acceptedFileTypes);
-            i0.ɵɵtwoWayProperty("ngModel", ctx.value);
+            i0.ɵɵproperty("placeholder", ctx.Placeholder)("disabled", ctx.Disabled)("currentUser", ctx.CurrentUser)("enableMentions", ctx.EnableMentions)("TriggerProviders", ctx.TriggerProviders)("ExcludedTriggerKeys", ctx.ExcludedTriggerKeys)("Provider", ctx.Provider)("enableAttachments", ctx.EnableAttachments)("maxAttachments", ctx.MaxAttachments)("maxAttachmentSizeBytes", ctx.MaxAttachmentSizeBytes)("acceptedFileTypes", ctx.AcceptedFileTypes);
+            i0.ɵɵtwoWayProperty("ngModel", ctx.Value);
             i0.ɵɵadvance(2);
-            i0.ɵɵconditional(ctx.enableAttachments || ctx.enableRealtime || ctx.enablePlanMode ? 4 : -1);
+            i0.ɵɵconditional(ctx.EnableAttachments || ctx.EnableRealtime || ctx.EnablePlanMode || ctx.EnableSkills ? 4 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵproperty("disabled", !ctx.canSend);
-        } }, dependencies: [i1.NgControlStatus, i1.NgModel, i2.MentionEditorComponent], styles: [".message-input-box-container[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  background: var(--mj-bg-surface-card);\n  border: 2px solid var(--mj-border-default);\n  border-radius: 12px;\n  box-shadow: var(--mj-shadow-sm);\n  transition: all 0.2s ease;\n  overflow: visible;\n  position: relative;\n  cursor: text;\n}\n.message-input-box-container[_ngcontent-%COMP%]:focus-within {\n  border-color: var(--mj-brand-primary);\n  box-shadow: 0 4px 16px color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n}\n\n.input-wrapper[_ngcontent-%COMP%] {\n  position: relative;\n  display: flex;\n  align-items: flex-end;\n  padding: 5px;\n}\n.input-wrapper[_ngcontent-%COMP%]   mj-mention-editor[_ngcontent-%COMP%] {\n  flex: 1;\n  display: block;\n}\n\n.message-input-box-textarea[_ngcontent-%COMP%] {\n  flex: 1;\n  min-height: 100px;\n  padding: 1rem;\n  padding-right: 3.5rem;\n  border: 0 !important;\n  outline: 0 !important;\n  box-shadow: none !important;\n  -webkit-appearance: none !important;\n  -moz-appearance: none !important;\n  appearance: none !important;\n  font-family: inherit;\n  font-size: 1rem;\n  line-height: 1.5;\n  resize: vertical;\n  background: transparent;\n  color: var(--mj-text-primary);\n  border: 0 !important;\n}\n.message-input-box-textarea[_ngcontent-%COMP%]::placeholder {\n  color: var(--mj-text-muted);\n}\n.message-input-box-textarea[_ngcontent-%COMP%]:disabled {\n  cursor: not-allowed;\n  opacity: 0.6;\n  background: var(--mj-bg-surface-sunken);\n}\n.message-input-box-textarea[_ngcontent-%COMP%]:focus, .message-input-box-textarea[_ngcontent-%COMP%]:active, .message-input-box-textarea[_ngcontent-%COMP%]:focus-visible {\n  outline: 0 !important;\n  box-shadow: none !important;\n}\n\n.send-button-icon[_ngcontent-%COMP%] {\n  position: absolute;\n  bottom: 0.75rem;\n  right: 0.75rem;\n  width: 36px;\n  height: 36px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n  border: none;\n  border-radius: 8px;\n  cursor: pointer;\n  transition: all 0.2s ease;\n  flex-shrink: 0;\n}\n.send-button-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 1rem;\n}\n.send-button-icon[_ngcontent-%COMP%]:hover:not(:disabled) {\n  background: var(--mj-brand-primary-hover);\n  transform: scale(1.05);\n}\n.send-button-icon[_ngcontent-%COMP%]:active:not(:disabled) {\n  transform: scale(0.95);\n}\n.send-button-icon[_ngcontent-%COMP%]:disabled {\n  background: var(--mj-border-default);\n  color: var(--mj-text-muted);\n  cursor: not-allowed;\n  opacity: 0.5;\n}\n\n\n\n.attach-buttons[_ngcontent-%COMP%] {\n  position: absolute;\n  bottom: 0.75rem;\n  right: 3rem;\n  display: flex;\n  gap: 2px;\n}\n.attach-button-icon[_ngcontent-%COMP%] {\n  width: 36px;\n  height: 36px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: transparent;\n  color: var(--mj-text-secondary);\n  border: none;\n  border-radius: 8px;\n  cursor: pointer;\n  transition: all 0.2s ease;\n  flex-shrink: 0;\n}\n.attach-button-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 1rem;\n}\n.attach-button-icon[_ngcontent-%COMP%]:hover:not(:disabled) {\n  background: color-mix(in srgb, var(--mj-text-primary) 5%, transparent);\n  color: var(--mj-brand-primary);\n  transform: scale(1.05);\n}\n.attach-button-icon[_ngcontent-%COMP%]:active:not(:disabled) {\n  transform: scale(0.95);\n}\n.attach-button-icon[_ngcontent-%COMP%]:disabled {\n  color: var(--mj-text-muted);\n  cursor: not-allowed;\n  opacity: 0.5;\n}\n\n\n\n\n.plan-mode-button-icon--active[_ngcontent-%COMP%]:not(:disabled) {\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n}\n.plan-mode-button-icon--active[_ngcontent-%COMP%]:not(:disabled):hover {\n  background: var(--mj-brand-primary-hover, var(--mj-brand-primary));\n  color: var(--mj-text-inverse);\n}\n\n\n\n@media (max-width: 768px) {\n  .message-input-box-container[_ngcontent-%COMP%] {\n    border-radius: 10px;\n    box-shadow: 0 2px 8px color-mix(in srgb, var(--mj-text-primary) 6%, transparent);\n  }\n  .message-input-box-textarea[_ngcontent-%COMP%] {\n    min-height: 80px;\n    padding: 0.75rem;\n    padding-right: 3rem;\n    font-size: 16px;\n    line-height: 1.4;\n  }\n  .send-button-icon[_ngcontent-%COMP%] {\n    width: 32px;\n    height: 32px;\n    bottom: 0.625rem;\n    right: 0.625rem;\n    border-radius: 6px;\n  }\n  .send-button-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 0.875rem;\n  }\n  .attach-buttons[_ngcontent-%COMP%] {\n    bottom: 0.625rem;\n    right: 2.75rem;\n  }\n  .attach-button-icon[_ngcontent-%COMP%] {\n    width: 32px;\n    height: 32px;\n  }\n  .attach-button-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 0.875rem;\n  }\n}\n\n\n@media (max-width: 480px) {\n  .message-input-box-container[_ngcontent-%COMP%] {\n    border-radius: 8px;\n    border-width: 1.5px;\n  }\n  .message-input-box-textarea[_ngcontent-%COMP%] {\n    min-height: 60px;\n    padding: 0.625rem;\n    padding-right: 2.75rem;\n    font-size: 16px;\n    line-height: 1.3;\n  }\n  .send-button-icon[_ngcontent-%COMP%] {\n    width: 36px;\n    height: 36px;\n    bottom: 0.5rem;\n    right: 0.5rem;\n    border-radius: 6px;\n  }\n  .send-button-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 0.875rem;\n  }\n  .attach-buttons[_ngcontent-%COMP%] {\n    bottom: 0.5rem;\n    right: 2.75rem;\n  }\n  .attach-button-icon[_ngcontent-%COMP%] {\n    width: 32px;\n    height: 32px;\n  }\n  .attach-button-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 0.875rem;\n  }\n}\n\n\n\n\n\n\n.voice-button-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n}\n.voice-button-icon[_ngcontent-%COMP%]:hover:not(:disabled)   i[_ngcontent-%COMP%] {\n  filter: drop-shadow(0 0 4px color-mix(in srgb, var(--mj-brand-primary) 55%, transparent));\n}\n.voice-button-icon[_ngcontent-%COMP%]:disabled   i[_ngcontent-%COMP%] {\n  color: var(--mj-text-disabled);\n}\n.voice-button-icon--active[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-brand-primary) 12%, transparent);\n}\n.voice-button-icon--active[_ngcontent-%COMP%]:hover:not(:disabled) {\n  background: color-mix(in srgb, var(--mj-brand-primary) 18%, transparent);\n}\n\n\n\n\n\n.voice-options-button-icon[_ngcontent-%COMP%] {\n  width: 20px;\n  margin-left: -4px;\n}\n.voice-options-button-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 0.7rem;\n  color: var(--mj-text-muted);\n}\n.voice-options-button-icon[_ngcontent-%COMP%]:hover:not(:disabled)   i[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n}\n.voice-options-button-icon[_ngcontent-%COMP%]:disabled   i[_ngcontent-%COMP%] {\n  color: var(--mj-text-disabled);\n}"] });
+            i0.ɵɵproperty("disabled", !ctx.CanSend);
+        } }, dependencies: [i1.NgControlStatus, i1.NgModel, i2.MentionEditorComponent], styles: [".message-input-box-container[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  background: var(--mj-bg-surface-card);\n  border: 2px solid var(--mj-border-default);\n  border-radius: 12px;\n  box-shadow: var(--mj-shadow-sm);\n  transition: all 0.2s ease;\n  overflow: visible;\n  position: relative;\n  cursor: text;\n}\n.message-input-box-container[_ngcontent-%COMP%]:focus-within {\n  border-color: var(--mj-brand-primary);\n  box-shadow: 0 4px 16px color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n}\n\n.input-wrapper[_ngcontent-%COMP%] {\n  position: relative;\n  display: flex;\n  align-items: flex-end;\n  padding: 5px;\n}\n.input-wrapper[_ngcontent-%COMP%]   mj-mention-editor[_ngcontent-%COMP%] {\n  flex: 1;\n  display: block;\n}\n\n.message-input-box-textarea[_ngcontent-%COMP%] {\n  flex: 1;\n  min-height: 100px;\n  padding: 1rem;\n  padding-right: 3.5rem;\n  border: 0 !important;\n  outline: 0 !important;\n  box-shadow: none !important;\n  -webkit-appearance: none !important;\n  -moz-appearance: none !important;\n  appearance: none !important;\n  font-family: inherit;\n  font-size: 1rem;\n  line-height: 1.5;\n  resize: vertical;\n  background: transparent;\n  color: var(--mj-text-primary);\n  border: 0 !important;\n}\n.message-input-box-textarea[_ngcontent-%COMP%]::placeholder {\n  color: var(--mj-text-muted);\n}\n.message-input-box-textarea[_ngcontent-%COMP%]:disabled {\n  cursor: not-allowed;\n  opacity: 0.6;\n  background: var(--mj-bg-surface-sunken);\n}\n.message-input-box-textarea[_ngcontent-%COMP%]:focus, .message-input-box-textarea[_ngcontent-%COMP%]:active, .message-input-box-textarea[_ngcontent-%COMP%]:focus-visible {\n  outline: 0 !important;\n  box-shadow: none !important;\n}\n\n.send-button-icon[_ngcontent-%COMP%] {\n  position: absolute;\n  bottom: 0.75rem;\n  right: 0.75rem;\n  width: 36px;\n  height: 36px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n  border: none;\n  border-radius: 8px;\n  cursor: pointer;\n  transition: all 0.2s ease;\n  flex-shrink: 0;\n}\n.send-button-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 1rem;\n}\n.send-button-icon[_ngcontent-%COMP%]:hover:not(:disabled) {\n  background: var(--mj-brand-primary-hover);\n  transform: scale(1.05);\n}\n.send-button-icon[_ngcontent-%COMP%]:active:not(:disabled) {\n  transform: scale(0.95);\n}\n.send-button-icon[_ngcontent-%COMP%]:disabled {\n  background: var(--mj-border-default);\n  color: var(--mj-text-muted);\n  cursor: not-allowed;\n  opacity: 0.5;\n}\n\n\n\n.attach-buttons[_ngcontent-%COMP%] {\n  position: absolute;\n  bottom: 0.75rem;\n  right: 3rem;\n  display: flex;\n  gap: 2px;\n}\n.attach-button-icon[_ngcontent-%COMP%] {\n  width: 36px;\n  height: 36px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: transparent;\n  color: var(--mj-text-secondary);\n  border: none;\n  border-radius: 8px;\n  cursor: pointer;\n  transition: all 0.2s ease;\n  flex-shrink: 0;\n}\n.attach-button-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 1rem;\n}\n.attach-button-icon[_ngcontent-%COMP%]:hover:not(:disabled) {\n  background: color-mix(in srgb, var(--mj-text-primary) 5%, transparent);\n  color: var(--mj-brand-primary);\n  transform: scale(1.05);\n}\n.attach-button-icon[_ngcontent-%COMP%]:active:not(:disabled) {\n  transform: scale(0.95);\n}\n.attach-button-icon[_ngcontent-%COMP%]:disabled {\n  color: var(--mj-text-muted);\n  cursor: not-allowed;\n  opacity: 0.5;\n}\n\n\n\n\n.plan-mode-button-icon--active[_ngcontent-%COMP%]:not(:disabled) {\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n}\n.plan-mode-button-icon--active[_ngcontent-%COMP%]:not(:disabled):hover {\n  background: var(--mj-brand-primary-hover, var(--mj-brand-primary));\n  color: var(--mj-text-inverse);\n}\n\n\n\n\n.skills-button-icon--active[_ngcontent-%COMP%]:not(:disabled) {\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n}\n.skills-button-icon--active[_ngcontent-%COMP%]:not(:disabled):hover {\n  background: var(--mj-brand-primary-hover, var(--mj-brand-primary));\n  color: var(--mj-text-inverse);\n}\n\n\n\n@media (max-width: 768px) {\n  .message-input-box-container[_ngcontent-%COMP%] {\n    border-radius: 10px;\n    box-shadow: 0 2px 8px color-mix(in srgb, var(--mj-text-primary) 6%, transparent);\n  }\n  .message-input-box-textarea[_ngcontent-%COMP%] {\n    min-height: 80px;\n    padding: 0.75rem;\n    padding-right: 3rem;\n    font-size: 16px;\n    line-height: 1.4;\n  }\n  .send-button-icon[_ngcontent-%COMP%] {\n    width: 32px;\n    height: 32px;\n    bottom: 0.625rem;\n    right: 0.625rem;\n    border-radius: 6px;\n  }\n  .send-button-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 0.875rem;\n  }\n  .attach-buttons[_ngcontent-%COMP%] {\n    bottom: 0.625rem;\n    right: 2.75rem;\n  }\n  .attach-button-icon[_ngcontent-%COMP%] {\n    width: 32px;\n    height: 32px;\n  }\n  .attach-button-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 0.875rem;\n  }\n}\n\n\n@media (max-width: 480px) {\n  .message-input-box-container[_ngcontent-%COMP%] {\n    border-radius: 8px;\n    border-width: 1.5px;\n  }\n  .message-input-box-textarea[_ngcontent-%COMP%] {\n    min-height: 60px;\n    padding: 0.625rem;\n    padding-right: 2.75rem;\n    font-size: 16px;\n    line-height: 1.3;\n  }\n  .send-button-icon[_ngcontent-%COMP%] {\n    width: 36px;\n    height: 36px;\n    bottom: 0.5rem;\n    right: 0.5rem;\n    border-radius: 6px;\n  }\n  .send-button-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 0.875rem;\n  }\n  .attach-buttons[_ngcontent-%COMP%] {\n    bottom: 0.5rem;\n    right: 2.75rem;\n  }\n  .attach-button-icon[_ngcontent-%COMP%] {\n    width: 32px;\n    height: 32px;\n  }\n  .attach-button-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 0.875rem;\n  }\n}\n\n\n\n\n\n\n.voice-button-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n}\n.voice-button-icon[_ngcontent-%COMP%]:hover:not(:disabled)   i[_ngcontent-%COMP%] {\n  filter: drop-shadow(0 0 4px color-mix(in srgb, var(--mj-brand-primary) 55%, transparent));\n}\n.voice-button-icon[_ngcontent-%COMP%]:disabled   i[_ngcontent-%COMP%] {\n  color: var(--mj-text-disabled);\n}\n.voice-button-icon--active[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-brand-primary) 12%, transparent);\n}\n.voice-button-icon--active[_ngcontent-%COMP%]:hover:not(:disabled) {\n  background: color-mix(in srgb, var(--mj-brand-primary) 18%, transparent);\n}\n\n\n\n\n\n.voice-options-button-icon[_ngcontent-%COMP%] {\n  width: 20px;\n  margin-left: -4px;\n}\n.voice-options-button-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 0.7rem;\n  color: var(--mj-text-muted);\n}\n.voice-options-button-icon[_ngcontent-%COMP%]:hover:not(:disabled)   i[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n}\n.voice-options-button-icon[_ngcontent-%COMP%]:disabled   i[_ngcontent-%COMP%] {\n  color: var(--mj-text-disabled);\n}"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MessageInputBoxComponent, [{
         type: Component,
-        args: [{ standalone: false, selector: 'mj-message-input-box', template: "<div class=\"message-input-box-container\" (click)=\"onContainerClick($event)\">\n  <div class=\"input-wrapper\">\n    <mj-mention-editor\n      #mentionEditor\n      [placeholder]=\"placeholder\"\n      [disabled]=\"disabled\"\n      [currentUser]=\"currentUser\"\n      [enableMentions]=\"enableMentions\"\n      [TriggerProviders]=\"TriggerProviders\"\n      [ExcludedTriggerKeys]=\"ExcludedTriggerKeys\"\n      [Provider]=\"Provider\"\n      [enableAttachments]=\"enableAttachments\"\n      [maxAttachments]=\"maxAttachments\"\n      [maxAttachmentSizeBytes]=\"maxAttachmentSizeBytes\"\n      [acceptedFileTypes]=\"acceptedFileTypes\"\n      [(ngModel)]=\"value\"\n      (valueChange)=\"onValueChange($event)\"\n      (enterPressed)=\"onEnterPressed($event)\"\n      (mentionSelected)=\"onMentionSelected($event)\"\n      (attachmentsChanged)=\"onAttachmentsChanged($event)\"\n      (attachmentError)=\"onAttachmentError($event)\"\n      (attachmentClicked)=\"onAttachmentClicked($event)\"\n      (editorBlurred)=\"blurred.emit()\">\n    </mj-mention-editor>\n\n    <!-- Attach + voice + plan-mode buttons - Positioned over editor -->\n    @if (enableAttachments || enableRealtime || enablePlanMode) {\n      <div class=\"attach-buttons\">\n        @if (enablePlanMode) {\n        <button\n          class=\"attach-button-icon plan-mode-button-icon\"\n          [class.plan-mode-button-icon--active]=\"planModeActive\"\n          [disabled]=\"disabled\"\n          [attr.aria-pressed]=\"planModeActive\"\n          (click)=\"planModeToggle.emit(); $event.stopPropagation()\"\n          [title]=\"planModeActive ? 'Plan Mode ON \u2014 the agent presents a plan for your approval before it acts' : 'Plan Mode: have the agent present a plan for your approval before it acts'\"\n          aria-label=\"Toggle Plan Mode\"\n          >\n          <i class=\"fa-solid fa-route\" aria-hidden=\"true\"></i>\n        </button>\n        }\n        @if (enableAttachments) {\n        <button\n          class=\"attach-button-icon\"\n          [disabled]=\"disabled\"\n          (click)=\"openFilePicker(); $event.stopPropagation()\"\n          title=\"Attach file\"\n          >\n          <i class=\"fa-solid fa-paperclip\"></i>\n        </button>\n        }\n        @if (enableRealtime) {\n        <button\n          class=\"attach-button-icon voice-button-icon\"\n          [class.voice-button-icon--active]=\"voiceActive\"\n          [disabled]=\"!canStartRealtime\"\n          (click)=\"onRealtimeClick(); $event.stopPropagation()\"\n          [title]=\"voiceActive ? 'Voice call active' : 'Start a voice call'\"\n          aria-label=\"Start a voice call\"\n          >\n          <i class=\"fa-solid fa-phone\" aria-hidden=\"true\"></i>\n        </button>\n        <!-- Caret beside the phone: opens the agent/model picker so call OPTIONS stay one\n             click away while the plain phone click keeps its instant-start behavior. -->\n        <button\n          class=\"attach-button-icon voice-options-button-icon\"\n          [disabled]=\"!canStartRealtime\"\n          (click)=\"onRealtimeOptionsClick(); $event.stopPropagation()\"\n          title=\"Voice call options (choose agent and voice model)\"\n          aria-label=\"Voice call options\"\n          >\n          <i class=\"fa-solid fa-chevron-down\" aria-hidden=\"true\"></i>\n        </button>\n        }\n      </div>\n    }\n\n    <!-- Send Button (Icon Only) - Positioned over editor -->\n    <button\n      class=\"send-button-icon\"\n      [disabled]=\"!canSend\"\n      (click)=\"onSendClick()\"\n      title=\"Send message (Enter)\"\n      >\n      <i class=\"fa-solid fa-paper-plane\"></i>\n    </button>\n  </div>\n</div>\n", styles: [".message-input-box-container {\n  display: flex;\n  flex-direction: column;\n  background: var(--mj-bg-surface-card);\n  border: 2px solid var(--mj-border-default);\n  border-radius: 12px;\n  box-shadow: var(--mj-shadow-sm);\n  transition: all 0.2s ease;\n  overflow: visible;\n  position: relative;\n  cursor: text;\n}\n.message-input-box-container:focus-within {\n  border-color: var(--mj-brand-primary);\n  box-shadow: 0 4px 16px color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n}\n\n.input-wrapper {\n  position: relative;\n  display: flex;\n  align-items: flex-end;\n  padding: 5px;\n}\n.input-wrapper mj-mention-editor {\n  flex: 1;\n  display: block;\n}\n\n.message-input-box-textarea {\n  flex: 1;\n  min-height: 100px;\n  padding: 1rem;\n  padding-right: 3.5rem;\n  border: 0 !important;\n  outline: 0 !important;\n  box-shadow: none !important;\n  -webkit-appearance: none !important;\n  -moz-appearance: none !important;\n  appearance: none !important;\n  font-family: inherit;\n  font-size: 1rem;\n  line-height: 1.5;\n  resize: vertical;\n  background: transparent;\n  color: var(--mj-text-primary);\n  border: 0 !important;\n}\n.message-input-box-textarea::placeholder {\n  color: var(--mj-text-muted);\n}\n.message-input-box-textarea:disabled {\n  cursor: not-allowed;\n  opacity: 0.6;\n  background: var(--mj-bg-surface-sunken);\n}\n.message-input-box-textarea:focus, .message-input-box-textarea:active, .message-input-box-textarea:focus-visible {\n  outline: 0 !important;\n  box-shadow: none !important;\n}\n\n.send-button-icon {\n  position: absolute;\n  bottom: 0.75rem;\n  right: 0.75rem;\n  width: 36px;\n  height: 36px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n  border: none;\n  border-radius: 8px;\n  cursor: pointer;\n  transition: all 0.2s ease;\n  flex-shrink: 0;\n}\n.send-button-icon i {\n  font-size: 1rem;\n}\n.send-button-icon:hover:not(:disabled) {\n  background: var(--mj-brand-primary-hover);\n  transform: scale(1.05);\n}\n.send-button-icon:active:not(:disabled) {\n  transform: scale(0.95);\n}\n.send-button-icon:disabled {\n  background: var(--mj-border-default);\n  color: var(--mj-text-muted);\n  cursor: not-allowed;\n  opacity: 0.5;\n}\n\n/* Attach buttons container */\n.attach-buttons {\n  position: absolute;\n  bottom: 0.75rem;\n  right: 3rem;\n  display: flex;\n  gap: 2px;\n}\n.attach-button-icon {\n  width: 36px;\n  height: 36px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: transparent;\n  color: var(--mj-text-secondary);\n  border: none;\n  border-radius: 8px;\n  cursor: pointer;\n  transition: all 0.2s ease;\n  flex-shrink: 0;\n}\n.attach-button-icon i {\n  font-size: 1rem;\n}\n.attach-button-icon:hover:not(:disabled) {\n  background: color-mix(in srgb, var(--mj-text-primary) 5%, transparent);\n  color: var(--mj-brand-primary);\n  transform: scale(1.05);\n}\n.attach-button-icon:active:not(:disabled) {\n  transform: scale(0.95);\n}\n.attach-button-icon:disabled {\n  color: var(--mj-text-muted);\n  cursor: not-allowed;\n  opacity: 0.5;\n}\n\n/* Plan Mode toggle \u2014 inherits .attach-button-icon; when active it fills with the brand color\n   so the on/off state reads clearly at a glance (parallels the voice button's active state). */\n.plan-mode-button-icon--active:not(:disabled) {\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n}\n.plan-mode-button-icon--active:not(:disabled):hover {\n  background: var(--mj-brand-primary-hover, var(--mj-brand-primary));\n  color: var(--mj-text-inverse);\n}\n\n/* Mobile adjustments: 481px - 768px */\n@media (max-width: 768px) {\n  .message-input-box-container {\n    border-radius: 10px;\n    box-shadow: 0 2px 8px color-mix(in srgb, var(--mj-text-primary) 6%, transparent);\n  }\n  .message-input-box-textarea {\n    min-height: 80px;\n    padding: 0.75rem;\n    padding-right: 3rem;\n    font-size: 16px;\n    line-height: 1.4;\n  }\n  .send-button-icon {\n    width: 32px;\n    height: 32px;\n    bottom: 0.625rem;\n    right: 0.625rem;\n    border-radius: 6px;\n  }\n  .send-button-icon i {\n    font-size: 0.875rem;\n  }\n  .attach-buttons {\n    bottom: 0.625rem;\n    right: 2.75rem;\n  }\n  .attach-button-icon {\n    width: 32px;\n    height: 32px;\n  }\n  .attach-button-icon i {\n    font-size: 0.875rem;\n  }\n}\n/* Small Phone adjustments: <= 480px */\n@media (max-width: 480px) {\n  .message-input-box-container {\n    border-radius: 8px;\n    border-width: 1.5px;\n  }\n  .message-input-box-textarea {\n    min-height: 60px;\n    padding: 0.625rem;\n    padding-right: 2.75rem;\n    font-size: 16px;\n    line-height: 1.3;\n  }\n  .send-button-icon {\n    width: 36px;\n    height: 36px;\n    bottom: 0.5rem;\n    right: 0.5rem;\n    border-radius: 6px;\n  }\n  .send-button-icon i {\n    font-size: 0.875rem;\n  }\n  .attach-buttons {\n    bottom: 0.5rem;\n    right: 2.75rem;\n  }\n  .attach-button-icon {\n    width: 32px;\n    height: 32px;\n  }\n  .attach-button-icon i {\n    font-size: 0.875rem;\n  }\n}\n\n/* Voice call button \u2014 a phone icon in the attach-buttons cluster, left of send.\n   Inherits .attach-button-icon base. Subtle brand glow on hover; active state (call\n   live) renders a brand-color tint. The orb visual now lives ONLY inside the call\n   overlay's banner. */\n.voice-button-icon i {\n  color: var(--mj-brand-primary);\n}\n.voice-button-icon:hover:not(:disabled) i {\n  filter: drop-shadow(0 0 4px color-mix(in srgb, var(--mj-brand-primary) 55%, transparent));\n}\n.voice-button-icon:disabled i {\n  color: var(--mj-text-disabled);\n}\n.voice-button-icon--active {\n  background: color-mix(in srgb, var(--mj-brand-primary) 12%, transparent);\n}\n.voice-button-icon--active:hover:not(:disabled) {\n  background: color-mix(in srgb, var(--mj-brand-primary) 18%, transparent);\n}\n\n/* Voice OPTIONS caret \u2014 a slim chevron hugging the phone button. Opens the agent/model\n   picker; intentionally quieter (smaller icon, narrower hit area) than the phone so the\n   common instant-start click stays the visual primary. */\n.voice-options-button-icon {\n  width: 20px;\n  margin-left: -4px;\n}\n.voice-options-button-icon i {\n  font-size: 0.7rem;\n  color: var(--mj-text-muted);\n}\n.voice-options-button-icon:hover:not(:disabled) i {\n  color: var(--mj-brand-primary);\n}\n.voice-options-button-icon:disabled i {\n  color: var(--mj-text-disabled);\n}\n"] }]
+        args: [{ standalone: false, selector: 'mj-message-input-box', template: "<div class=\"message-input-box-container\" (click)=\"OnContainerClick($event)\">\n  <div class=\"input-wrapper\">\n    <mj-mention-editor\n      #mentionEditor\n      [placeholder]=\"Placeholder\"\n      [disabled]=\"Disabled\"\n      [currentUser]=\"CurrentUser\"\n      [enableMentions]=\"EnableMentions\"\n      [TriggerProviders]=\"TriggerProviders\"\n      [ExcludedTriggerKeys]=\"ExcludedTriggerKeys\"\n      [Provider]=\"Provider\"\n      [enableAttachments]=\"EnableAttachments\"\n      [maxAttachments]=\"MaxAttachments\"\n      [maxAttachmentSizeBytes]=\"MaxAttachmentSizeBytes\"\n      [acceptedFileTypes]=\"AcceptedFileTypes\"\n      [(ngModel)]=\"Value\"\n      (valueChange)=\"OnValueChange($event)\"\n      (enterPressed)=\"OnEnterPressed($event)\"\n      (mentionSelected)=\"OnMentionSelected($event)\"\n      (attachmentsChanged)=\"OnAttachmentsChanged($event)\"\n      (attachmentError)=\"OnAttachmentError($event)\"\n      (attachmentClicked)=\"OnAttachmentClicked($event)\"\n      (editorBlurred)=\"Blurred.emit()\">\n    </mj-mention-editor>\n\n    <!-- Attach + voice + plan-mode buttons - Positioned over editor -->\n    @if (EnableAttachments || EnableRealtime || EnablePlanMode || EnableSkills) {\n      <div class=\"attach-buttons\">\n        @if (EnableSkills) {\n        <button\n          class=\"attach-button-icon skills-button-icon\"\n          [class.skills-button-icon--active]=\"SkillsActive\"\n          [disabled]=\"Disabled\"\n          [attr.aria-expanded]=\"SkillsActive\"\n          aria-haspopup=\"true\"\n          (mousedown)=\"$event.preventDefault(); $event.stopPropagation()\"\n          (click)=\"OnSkillsClick($event); $event.stopPropagation()\"\n          title=\"Skills, or type / in the message box\"\n          aria-label=\"Show skills\"\n          >\n          <i class=\"fa-solid fa-wand-magic-sparkles\" aria-hidden=\"true\"></i>\n        </button>\n        }\n        @if (EnablePlanMode) {\n        <button\n          class=\"attach-button-icon plan-mode-button-icon\"\n          [class.plan-mode-button-icon--active]=\"PlanModeActive\"\n          [disabled]=\"Disabled\"\n          [attr.aria-pressed]=\"PlanModeActive\"\n          (click)=\"PlanModeToggle.emit(); $event.stopPropagation()\"\n          [title]=\"PlanModeActive ? 'Plan Mode ON \u2014 the agent presents a plan for your approval before it acts' : 'Plan Mode: have the agent present a plan for your approval before it acts'\"\n          aria-label=\"Toggle Plan Mode\"\n          >\n          <i class=\"fa-solid fa-route\" aria-hidden=\"true\"></i>\n        </button>\n        }\n        @if (EnableAttachments) {\n        <button\n          class=\"attach-button-icon\"\n          [disabled]=\"Disabled\"\n          (click)=\"OpenFilePicker(); $event.stopPropagation()\"\n          title=\"Attach file\"\n          >\n          <i class=\"fa-solid fa-paperclip\"></i>\n        </button>\n        }\n        @if (EnableRealtime) {\n        <button\n          class=\"attach-button-icon voice-button-icon\"\n          [class.voice-button-icon--active]=\"VoiceActive\"\n          [disabled]=\"!CanStartRealtime\"\n          (click)=\"OnRealtimeClick(); $event.stopPropagation()\"\n          [title]=\"VoiceActive ? 'Voice call active' : 'Start a voice call'\"\n          aria-label=\"Start a voice call\"\n          >\n          <i class=\"fa-solid fa-phone\" aria-hidden=\"true\"></i>\n        </button>\n        <!-- Caret beside the phone: opens the agent/model picker so call OPTIONS stay one\n             click away while the plain phone click keeps its instant-start behavior. -->\n        <button\n          class=\"attach-button-icon voice-options-button-icon\"\n          [disabled]=\"!CanStartRealtime\"\n          (click)=\"OnRealtimeOptionsClick(); $event.stopPropagation()\"\n          title=\"Voice call options (choose agent and voice model)\"\n          aria-label=\"Voice call options\"\n          >\n          <i class=\"fa-solid fa-chevron-down\" aria-hidden=\"true\"></i>\n        </button>\n        }\n      </div>\n    }\n\n    <!-- Send Button (Icon Only) - Positioned over editor -->\n    <button\n      class=\"send-button-icon\"\n      [disabled]=\"!CanSend\"\n      (click)=\"OnSendClick()\"\n      title=\"Send message (Enter)\"\n      >\n      <i class=\"fa-solid fa-paper-plane\"></i>\n    </button>\n  </div>\n</div>\n", styles: [".message-input-box-container {\n  display: flex;\n  flex-direction: column;\n  background: var(--mj-bg-surface-card);\n  border: 2px solid var(--mj-border-default);\n  border-radius: 12px;\n  box-shadow: var(--mj-shadow-sm);\n  transition: all 0.2s ease;\n  overflow: visible;\n  position: relative;\n  cursor: text;\n}\n.message-input-box-container:focus-within {\n  border-color: var(--mj-brand-primary);\n  box-shadow: 0 4px 16px color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n}\n\n.input-wrapper {\n  position: relative;\n  display: flex;\n  align-items: flex-end;\n  padding: 5px;\n}\n.input-wrapper mj-mention-editor {\n  flex: 1;\n  display: block;\n}\n\n.message-input-box-textarea {\n  flex: 1;\n  min-height: 100px;\n  padding: 1rem;\n  padding-right: 3.5rem;\n  border: 0 !important;\n  outline: 0 !important;\n  box-shadow: none !important;\n  -webkit-appearance: none !important;\n  -moz-appearance: none !important;\n  appearance: none !important;\n  font-family: inherit;\n  font-size: 1rem;\n  line-height: 1.5;\n  resize: vertical;\n  background: transparent;\n  color: var(--mj-text-primary);\n  border: 0 !important;\n}\n.message-input-box-textarea::placeholder {\n  color: var(--mj-text-muted);\n}\n.message-input-box-textarea:disabled {\n  cursor: not-allowed;\n  opacity: 0.6;\n  background: var(--mj-bg-surface-sunken);\n}\n.message-input-box-textarea:focus, .message-input-box-textarea:active, .message-input-box-textarea:focus-visible {\n  outline: 0 !important;\n  box-shadow: none !important;\n}\n\n.send-button-icon {\n  position: absolute;\n  bottom: 0.75rem;\n  right: 0.75rem;\n  width: 36px;\n  height: 36px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n  border: none;\n  border-radius: 8px;\n  cursor: pointer;\n  transition: all 0.2s ease;\n  flex-shrink: 0;\n}\n.send-button-icon i {\n  font-size: 1rem;\n}\n.send-button-icon:hover:not(:disabled) {\n  background: var(--mj-brand-primary-hover);\n  transform: scale(1.05);\n}\n.send-button-icon:active:not(:disabled) {\n  transform: scale(0.95);\n}\n.send-button-icon:disabled {\n  background: var(--mj-border-default);\n  color: var(--mj-text-muted);\n  cursor: not-allowed;\n  opacity: 0.5;\n}\n\n/* Attach buttons container */\n.attach-buttons {\n  position: absolute;\n  bottom: 0.75rem;\n  right: 3rem;\n  display: flex;\n  gap: 2px;\n}\n.attach-button-icon {\n  width: 36px;\n  height: 36px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: transparent;\n  color: var(--mj-text-secondary);\n  border: none;\n  border-radius: 8px;\n  cursor: pointer;\n  transition: all 0.2s ease;\n  flex-shrink: 0;\n}\n.attach-button-icon i {\n  font-size: 1rem;\n}\n.attach-button-icon:hover:not(:disabled) {\n  background: color-mix(in srgb, var(--mj-text-primary) 5%, transparent);\n  color: var(--mj-brand-primary);\n  transform: scale(1.05);\n}\n.attach-button-icon:active:not(:disabled) {\n  transform: scale(0.95);\n}\n.attach-button-icon:disabled {\n  color: var(--mj-text-muted);\n  cursor: not-allowed;\n  opacity: 0.5;\n}\n\n/* Plan Mode toggle \u2014 inherits .attach-button-icon; when active it fills with the brand color\n   so the on/off state reads clearly at a glance (parallels the voice button's active state). */\n.plan-mode-button-icon--active:not(:disabled) {\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n}\n.plan-mode-button-icon--active:not(:disabled):hover {\n  background: var(--mj-brand-primary-hover, var(--mj-brand-primary));\n  color: var(--mj-text-inverse);\n}\n\n/* Same active treatment as Plan Mode \u2014 the two are peers in the strip, so a different one would\n   read as a different KIND of control. Everything else comes from .attach-button-icon. */\n.skills-button-icon--active:not(:disabled) {\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n}\n.skills-button-icon--active:not(:disabled):hover {\n  background: var(--mj-brand-primary-hover, var(--mj-brand-primary));\n  color: var(--mj-text-inverse);\n}\n\n/* Mobile adjustments: 481px - 768px */\n@media (max-width: 768px) {\n  .message-input-box-container {\n    border-radius: 10px;\n    box-shadow: 0 2px 8px color-mix(in srgb, var(--mj-text-primary) 6%, transparent);\n  }\n  .message-input-box-textarea {\n    min-height: 80px;\n    padding: 0.75rem;\n    padding-right: 3rem;\n    font-size: 16px;\n    line-height: 1.4;\n  }\n  .send-button-icon {\n    width: 32px;\n    height: 32px;\n    bottom: 0.625rem;\n    right: 0.625rem;\n    border-radius: 6px;\n  }\n  .send-button-icon i {\n    font-size: 0.875rem;\n  }\n  .attach-buttons {\n    bottom: 0.625rem;\n    right: 2.75rem;\n  }\n  .attach-button-icon {\n    width: 32px;\n    height: 32px;\n  }\n  .attach-button-icon i {\n    font-size: 0.875rem;\n  }\n}\n/* Small Phone adjustments: <= 480px */\n@media (max-width: 480px) {\n  .message-input-box-container {\n    border-radius: 8px;\n    border-width: 1.5px;\n  }\n  .message-input-box-textarea {\n    min-height: 60px;\n    padding: 0.625rem;\n    padding-right: 2.75rem;\n    font-size: 16px;\n    line-height: 1.3;\n  }\n  .send-button-icon {\n    width: 36px;\n    height: 36px;\n    bottom: 0.5rem;\n    right: 0.5rem;\n    border-radius: 6px;\n  }\n  .send-button-icon i {\n    font-size: 0.875rem;\n  }\n  .attach-buttons {\n    bottom: 0.5rem;\n    right: 2.75rem;\n  }\n  .attach-button-icon {\n    width: 32px;\n    height: 32px;\n  }\n  .attach-button-icon i {\n    font-size: 0.875rem;\n  }\n}\n\n/* Voice call button \u2014 a phone icon in the attach-buttons cluster, left of send.\n   Inherits .attach-button-icon base. Subtle brand glow on hover; active state (call\n   live) renders a brand-color tint. The orb visual now lives ONLY inside the call\n   overlay's banner. */\n.voice-button-icon i {\n  color: var(--mj-brand-primary);\n}\n.voice-button-icon:hover:not(:disabled) i {\n  filter: drop-shadow(0 0 4px color-mix(in srgb, var(--mj-brand-primary) 55%, transparent));\n}\n.voice-button-icon:disabled i {\n  color: var(--mj-text-disabled);\n}\n.voice-button-icon--active {\n  background: color-mix(in srgb, var(--mj-brand-primary) 12%, transparent);\n}\n.voice-button-icon--active:hover:not(:disabled) {\n  background: color-mix(in srgb, var(--mj-brand-primary) 18%, transparent);\n}\n\n/* Voice OPTIONS caret \u2014 a slim chevron hugging the phone button. Opens the agent/model\n   picker; intentionally quieter (smaller icon, narrower hit area) than the phone so the\n   common instant-start click stays the visual primary. */\n.voice-options-button-icon {\n  width: 20px;\n  margin-left: -4px;\n}\n.voice-options-button-icon i {\n  font-size: 0.7rem;\n  color: var(--mj-text-muted);\n}\n.voice-options-button-icon:hover:not(:disabled) i {\n  color: var(--mj-brand-primary);\n}\n.voice-options-button-icon:disabled i {\n  color: var(--mj-text-disabled);\n}\n"] }]
     }], null, { mentionEditor: [{
             type: ViewChild,
             args: ['mentionEditor']
-        }], placeholder: [{
+        }], Placeholder: [{
             type: Input
-        }], disabled: [{
+        }], Disabled: [{
             type: Input
-        }], value: [{
+        }], Value: [{
             type: Input
-        }], showCharacterCount: [{
+        }], ShowCharacterCount: [{
             type: Input
-        }], enableMentions: [{
+        }], EnableMentions: [{
             type: Input
         }], TriggerProviders: [{
             type: Input
@@ -307,46 +403,52 @@ export class MessageInputBoxComponent {
             type: Input
         }], Provider: [{
             type: Input
-        }], currentUser: [{
+        }], CurrentUser: [{
             type: Input
-        }], rows: [{
+        }], Rows: [{
             type: Input
-        }], enableAttachments: [{
+        }], EnableAttachments: [{
             type: Input
-        }], maxAttachments: [{
+        }], MaxAttachments: [{
             type: Input
-        }], maxAttachmentSizeBytes: [{
+        }], MaxAttachmentSizeBytes: [{
             type: Input
-        }], acceptedFileTypes: [{
+        }], AcceptedFileTypes: [{
             type: Input
-        }], enableRealtime: [{
+        }], EnableRealtime: [{
             type: Input
-        }], voiceActive: [{
+        }], VoiceActive: [{
             type: Input
-        }], canStartRealtime: [{
+        }], CanStartRealtime: [{
             type: Input
-        }], enablePlanMode: [{
+        }], EnablePlanMode: [{
             type: Input
-        }], planModeActive: [{
+        }], PlanModeActive: [{
             type: Input
-        }], blurred: [{
+        }], EnableSkills: [{
+            type: Input
+        }], Blurred: [{
+            type: Output
+        }], TextSubmitted: [{
+            type: Output
+        }], ValueChange: [{
             type: Output
-        }], textSubmitted: [{
+        }], AttachmentsChanged: [{
             type: Output
-        }], valueChange: [{
+        }], AttachmentError: [{
             type: Output
-        }], attachmentsChanged: [{
+        }], AttachmentClicked: [{
             type: Output
-        }], attachmentError: [{
+        }], VoiceRequested: [{
             type: Output
-        }], attachmentClicked: [{
+        }], VoiceOptionsRequested: [{
             type: Output
-        }], voiceRequested: [{
+        }], PlanModeToggle: [{
             type: Output
-        }], voiceOptionsRequested: [{
+        }], BeforeSkillsOpened: [{
             type: Output
-        }], planModeToggle: [{
+        }], AfterSkillsOpened: [{
             type: Output
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MessageInputBoxComponent, { className: "MessageInputBoxComponent", filePath: "src/lib/components/message/message-input-box.component.ts", lineNumber: 27 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MessageInputBoxComponent, { className: "MessageInputBoxComponent", filePath: "src/lib/components/message/message-input-box.component.ts", lineNumber: 28 }); })();
 //# sourceMappingURL=message-input-box.component.js.map