@memberjunction/ng-conversations 5.43.0 → 5.44.0

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

@@ -5,48 +5,57 @@ 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", 7);
-    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.openFilePicker(); return i0.ɵɵresetView($event.stopPropagation()); });
-    i0.ɵɵelement(1, "i", 8);
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(2, "button", 9);
-    i0.ɵɵlistener("click", function MessageInputBoxComponent_Conditional_4_Conditional_1_Template_button_click_2_listener($event) { i0.ɵɵrestoreView(_r2); const ctx_r2 = i0.ɵɵnextContext(2); ctx_r2.openArtifactPicker(); return i0.ɵɵresetView($event.stopPropagation()); });
-    i0.ɵɵelement(3, "i", 10);
+    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.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(2);
-    i0.ɵɵproperty("disabled", ctx_r2.disabled);
-    i0.ɵɵadvance(2);
-    i0.ɵɵproperty("disabled", true);
+    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_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.onVoiceClick(); return i0.ɵɵresetView($event.stopPropagation()); });
+    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.ɵɵelementEnd();
-    i0.ɵɵelementStart(2, "button", 13);
-    i0.ɵɵlistener("click", function MessageInputBoxComponent_Conditional_4_Conditional_2_Template_button_click_2_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r2 = i0.ɵɵnextContext(2); ctx_r2.onVoiceOptionsClick(); return i0.ɵɵresetView($event.stopPropagation()); });
-    i0.ɵɵelement(3, "i", 14);
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext(2);
+    i0.ɵɵproperty("disabled", ctx_r2.disabled);
+} }
+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.ɵɵ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);
     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.canStartVoice)("title", ctx_r2.voiceActive ? "Voice call active" : "Start a voice call");
+    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.canStartVoice);
+    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, 4, 2);
-    i0.ɵɵconditionalCreate(2, MessageInputBoxComponent_Conditional_4_Conditional_2_Template, 4, 5);
+    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.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext();
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r2.enableAttachments ? 1 : -1);
+    i0.ɵɵconditional(ctx_r2.enablePlanMode ? 1 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r2.enableVoice ? 2 : -1);
+    i0.ɵɵconditional(ctx_r2.enableAttachments ? 2 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r2.enableRealtime ? 3 : -1);
 } }
 /**
  * Reusable message input box component (presentational)
@@ -78,17 +87,20 @@ export class MessageInputBoxComponent {
     maxAttachmentSizeBytes = 20 * 1024 * 1024; // 20MB
     acceptedFileTypes = 'image/*';
     /** Shows the in-composer mic button when true. */
-    enableVoice = 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). */
-    canStartVoice = true;
+    canStartRealtime = true;
+    /** Shows the in-composer Plan Mode toggle button when true. */
+    enablePlanMode = false;
+    /** Current Plan Mode toggle state (renders the button in its active state). */
+    planModeActive = false;
     textSubmitted = new EventEmitter();
     valueChange = new EventEmitter();
     attachmentsChanged = new EventEmitter();
     attachmentError = new EventEmitter();
     attachmentClicked = new EventEmitter();
-    artifactPickerRequested = new EventEmitter();
     /** Emitted when the user clicks the mic button to start/stop a voice session. */
     voiceRequested = new EventEmitter();
     /**
@@ -97,10 +109,12 @@ export class MessageInputBoxComponent {
      * without adding friction to the plain phone click's instant-start path.
      */
     voiceOptionsRequested = new EventEmitter();
-    onVoiceClick() {
+    /** Emitted when the user clicks the in-composer Plan Mode toggle button. */
+    planModeToggle = new EventEmitter();
+    onRealtimeClick() {
         this.voiceRequested.emit();
     }
-    onVoiceOptionsClick() {
+    onRealtimeOptionsClick() {
         this.voiceOptionsRequested.emit();
     }
     get canSend() {
@@ -219,18 +233,6 @@ export class MessageInputBoxComponent {
     openFilePicker() {
         this.mentionEditor?.openFilePicker();
     }
-    /**
-     * Open artifact picker - emits event for parent to handle.
-     *
-     * TODO (2026-04-15): no consumer currently handles `artifactPickerRequested`.
-     * The prior handler was removed by commit 0a4612abf1 and the orphaned
-     * template was cleaned up in 7a063fc12a. The template button is disabled
-     * to signal the gap. See message-input-box.component.html for the TODO
-     * describing the suggested picker implementation.
-     */
-    openArtifactPicker() {
-        this.artifactPickerRequested.emit();
-    }
     /**
      * Add an artifact as a pending attachment (called by parent after artifact selection)
      */
@@ -243,7 +245,7 @@ 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", currentUser: "currentUser", rows: "rows", enableAttachments: "enableAttachments", maxAttachments: "maxAttachments", maxAttachmentSizeBytes: "maxAttachmentSizeBytes", acceptedFileTypes: "acceptedFileTypes", enableVoice: "enableVoice", voiceActive: "voiceActive", canStartVoice: "canStartVoice" }, outputs: { textSubmitted: "textSubmitted", valueChange: "valueChange", attachmentsChanged: "attachmentsChanged", attachmentError: "attachmentError", attachmentClicked: "attachmentClicked", artifactPickerRequested: "artifactPickerRequested", voiceRequested: "voiceRequested", voiceOptionsRequested: "voiceOptionsRequested" }, standalone: false, decls: 7, vars: 11, consts: [["mentionEditor", ""], [1, "message-input-box-container", 3, "click"], [1, "input-wrapper"], [3, "ngModelChange", "valueChange", "enterPressed", "mentionSelected", "attachmentsChanged", "attachmentError", "attachmentClicked", "placeholder", "disabled", "currentUser", "enableMentions", "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"], ["title", "Attach file", 1, "attach-button-icon", 3, "click", "disabled"], [1, "fa-solid", "fa-paperclip"], ["title", "Attach artifact from library \u2014 not yet wired (see message-input-box.component.html TODO)", 1, "attach-button-icon", "attach-artifact-button", 3, "click", "disabled"], [1, "fa-solid", "fa-cube"], ["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", currentUser: "currentUser", rows: "rows", enableAttachments: "enableAttachments", maxAttachments: "maxAttachments", maxAttachmentSizeBytes: "maxAttachmentSizeBytes", acceptedFileTypes: "acceptedFileTypes", enableRealtime: "enableRealtime", voiceActive: "voiceActive", canStartRealtime: "canStartRealtime", enablePlanMode: "enablePlanMode", planModeActive: "planModeActive" }, outputs: { textSubmitted: "textSubmitted", valueChange: "valueChange", attachmentsChanged: "attachmentsChanged", attachmentError: "attachmentError", attachmentClicked: "attachmentClicked", voiceRequested: "voiceRequested", voiceOptionsRequested: "voiceOptionsRequested", planModeToggle: "planModeToggle" }, standalone: false, decls: 7, vars: 11, consts: [["mentionEditor", ""], [1, "message-input-box-container", 3, "click"], [1, "input-wrapper"], [3, "ngModelChange", "valueChange", "enterPressed", "mentionSelected", "attachmentsChanged", "attachmentError", "attachmentClicked", "placeholder", "disabled", "currentUser", "enableMentions", "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) {
             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)); });
@@ -251,7 +253,7 @@ export class MessageInputBoxComponent {
             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)); });
             i0.ɵɵelementEnd();
-            i0.ɵɵconditionalCreate(4, MessageInputBoxComponent_Conditional_4_Template, 3, 2, "div", 4);
+            i0.ɵɵconditionalCreate(4, MessageInputBoxComponent_Conditional_4_Template, 4, 3, "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.ɵɵelement(6, "i", 6);
@@ -261,14 +263,14 @@ export class MessageInputBoxComponent {
             i0.ɵɵproperty("placeholder", ctx.placeholder)("disabled", ctx.disabled)("currentUser", ctx.currentUser)("enableMentions", ctx.enableMentions)("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.enableVoice ? 4 : -1);
+            i0.ɵɵconditional(ctx.enableAttachments || ctx.enableRealtime || ctx.enablePlanMode ? 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@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}"] });
+        } }, 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}"] });
 }
 (() => { (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      [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    </mj-mention-editor>\n\n    <!-- Attach + voice buttons - Positioned over editor -->\n    @if (enableAttachments || enableVoice) {\n      <div class=\"attach-buttons\">\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          TODO: \"Attach artifact from library\" button is not yet wired.\n\n          Current state (2026-04-15): emits `artifactPickerRequested` but no\n          consumer handles the event (handler was removed by commit 0a4612abf1,\n          orphaned template cleaned up in 7a063fc12a). Button is intentionally\n          visible but disabled so it's obvious what's missing.\n\n          To finish: build a picker modal (suggested approach: wrap the\n          `<mj-tree-dropdown>` used in dashboard-viewer's artifact-config-panel)\n          and on selection, attach the artifact version as a Direction='Input'\n          MJConversationDetailArtifact junction on the outgoing message.\n          The infrastructure for agents reading input artifacts is already in\n          place via AgentRunner.gatherConversationArtifacts().\n\n          See also: packages/Angular/Generic/artifacts/src/lib/services/analyze-artifact.service.ts\n          which does the similar end-to-end flow for standalone Analyze \u2014 the\n          attach-to-draft path is a strict subset (no artifact creation, no\n          conversation creation, just the junction).\n        -->\n        <button\n          class=\"attach-button-icon attach-artifact-button\"\n          [disabled]=\"true\"\n          (click)=\"openArtifactPicker(); $event.stopPropagation()\"\n          title=\"Attach artifact from library \u2014 not yet wired (see message-input-box.component.html TODO)\"\n          >\n          <i class=\"fa-solid fa-cube\"></i>\n        </button>\n        }\n        @if (enableVoice) {\n        <button\n          class=\"attach-button-icon voice-button-icon\"\n          [class.voice-button-icon--active]=\"voiceActive\"\n          [disabled]=\"!canStartVoice\"\n          (click)=\"onVoiceClick(); $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]=\"!canStartVoice\"\n          (click)=\"onVoiceOptionsClick(); $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/* 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      [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    </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"] }]
     }], null, { mentionEditor: [{
             type: ViewChild,
             args: ['mentionEditor']
@@ -294,11 +296,15 @@ export class MessageInputBoxComponent {
             type: Input
         }], acceptedFileTypes: [{
             type: Input
-        }], enableVoice: [{
+        }], enableRealtime: [{
             type: Input
         }], voiceActive: [{
             type: Input
-        }], canStartVoice: [{
+        }], canStartRealtime: [{
+            type: Input
+        }], enablePlanMode: [{
+            type: Input
+        }], planModeActive: [{
             type: Input
         }], textSubmitted: [{
             type: Output
@@ -310,12 +316,12 @@ export class MessageInputBoxComponent {
             type: Output
         }], attachmentClicked: [{
             type: Output
-        }], artifactPickerRequested: [{
-            type: Output
         }], voiceRequested: [{
             type: Output
         }], voiceOptionsRequested: [{
             type: Output
+        }], planModeToggle: [{
+            type: Output
         }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MessageInputBoxComponent, { className: "MessageInputBoxComponent", filePath: "src/lib/components/message/message-input-box.component.ts", lineNumber: 27 }); })();
 //# sourceMappingURL=message-input-box.component.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"message-input-box.component.js","sourceRoot":"","sources":["../../../../src/lib/components/message/message-input-box.component.ts","../../../../src/lib/components/message/message-input-box.component.html"],"names":[],"mappings":"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","sourcesContent":["import { Component, Input, Output, EventEmitter, ViewChild } from '@angular/core';\nimport { UserInfo } from '@memberjunction/core';\nimport { MentionSuggestion } from '../../services/mention-autocomplete.service';\nimport { MentionEditorComponent, PendingAttachment } from '../mention/mention-editor.component';\n\n/**\n * Reusable message input box component (presentational)\n * Now uses MentionEditorComponent for rich @mention functionality with chips\n *\n * Handles:\n * - Text input with keyboard shortcuts via MentionEditorComponent\n * - @mention autocomplete with visual chips (contentEditable)\n * - Send button\n *\n * Does NOT handle:\n * - Saving messages to database\n * - Agent invocation\n * - Artifact creation\n * - Conversation management\n */\n@Component({\n  standalone: false,\n  selector: 'mj-message-input-box',\n  templateUrl: './message-input-box.component.html',\n  styleUrls: ['./message-input-box.component.css']\n})\nexport class MessageInputBoxComponent {\n  @ViewChild('mentionEditor') mentionEditor?: MentionEditorComponent;\n\n  @Input() placeholder: string = 'Type your message to start a new conversation...';\n  @Input() disabled: boolean = false;\n  @Input() value: string = '';\n  @Input() showCharacterCount: boolean = false;\n  @Input() enableMentions: boolean = true;\n  @Input() currentUser?: UserInfo;\n  @Input() rows: number = 3;\n\n  // Attachment settings\n  @Input() enableAttachments: boolean = true;\n  @Input() maxAttachments: number = 10;\n  @Input() maxAttachmentSizeBytes: number = 20 * 1024 * 1024; // 20MB\n  @Input() acceptedFileTypes: string = 'image/*';\n\n  /** Shows the in-composer mic button when true. */\n  @Input() enableVoice: boolean = false;\n  /** Whether a realtime voice session is currently active (mic renders in its active state). */\n  @Input() voiceActive: boolean = false;\n  /** Whether a voice session can be started right now (mic disabled when false). */\n  @Input() canStartVoice: boolean = true;\n\n  @Output() textSubmitted = new EventEmitter<string>();\n  @Output() valueChange = new EventEmitter<string>();\n  @Output() attachmentsChanged = new EventEmitter<PendingAttachment[]>();\n  @Output() attachmentError = new EventEmitter<string>();\n  @Output() attachmentClicked = new EventEmitter<PendingAttachment>();\n  @Output() artifactPickerRequested = new EventEmitter<void>();\n  /** Emitted when the user clicks the mic button to start/stop a voice session. */\n  @Output() voiceRequested = new EventEmitter<void>();\n  /**\n   * Emitted when the user clicks the small caret next to the phone button — the host opens the\n   * voice agent/model picker so call options (which agent, which voice model) stay reachable\n   * without adding friction to the plain phone click's instant-start path.\n   */\n  @Output() voiceOptionsRequested = new EventEmitter<void>();\n\n  onVoiceClick(): void {\n    this.voiceRequested.emit();\n  }\n\n  onVoiceOptionsClick(): void {\n    this.voiceOptionsRequested.emit();\n  }\n\n  get canSend(): boolean {\n    const hasText = this.value.trim().length > 0;\n    const hasAttachments = this.mentionEditor?.hasAttachments() || false;\n    return !this.disabled && (hasText || hasAttachments);\n  }\n\n  /**\n   * Handle value changes from MentionEditorComponent\n   */\n  onValueChange(newValue: string): void {\n    this.value = newValue;\n    this.valueChange.emit(this.value);\n  }\n\n  /**\n   * Handle attachment changes from MentionEditorComponent\n   */\n  onAttachmentsChanged(attachments: PendingAttachment[]): void {\n    this.attachmentsChanged.emit(attachments);\n  }\n\n  /**\n   * Handle attachment errors from MentionEditorComponent\n   */\n  onAttachmentError(error: string): void {\n    this.attachmentError.emit(error);\n  }\n\n  /**\n   * Handle attachment click from MentionEditorComponent\n   */\n  onAttachmentClicked(attachment: PendingAttachment): void {\n    this.attachmentClicked.emit(attachment);\n  }\n\n  /**\n   * Handle Enter key from MentionEditorComponent\n   * Extracts plain text with JSON-encoded mentions for message submission\n   */\n  onEnterPressed(_text: string): void {\n    this.onSendClick();\n  }\n\n  /**\n   * Handle mention selection from MentionEditorComponent\n   */\n  onMentionSelected(suggestion: MentionSuggestion): void {\n    // MentionEditorComponent already inserts the mention chip\n    // This is just for additional tracking/analytics if needed\n  }\n\n  /**\n   * Send the message\n   * Extracts plain text with JSON-encoded mentions for proper persistence\n   */\n  onSendClick(): void {\n    if (this.canSend) {\n      // Get plain text with JSON-encoded mentions (preserves configuration info)\n      const textToSend = this.mentionEditor?.getPlainTextWithJsonMentions() || this.value.trim();\n      this.textSubmitted.emit(textToSend);\n      this.value = ''; // Clear input after sending\n\n      // Clear the editor content\n      if (this.mentionEditor) {\n        this.mentionEditor.clear();\n      }\n\n      this.valueChange.emit(this.value);\n    }\n  }\n\n  /**\n   * Handle clicks on the container - focus the mention editor\n   * Only moves cursor to end if clicking outside the contentEditable area\n   */\n  onContainerClick(event: MouseEvent): void {\n    const target = event.target as HTMLElement;\n\n    // Don't handle clicks on the send button\n    if (target.closest('.send-button-icon')) {\n      return;\n    }\n\n    const editor = this.mentionEditor?.editorRef?.nativeElement;\n    if (!editor) return;\n\n    // If clicking directly on the editor or its children, let the browser handle cursor placement\n    if (target === editor || editor.contains(target)) {\n      return;\n    }\n\n    // Only if clicking on the container (empty space), focus and move cursor to end\n    editor.focus();\n    const selection = window.getSelection();\n    const range = document.createRange();\n\n    if (selection) {\n      range.selectNodeContents(editor);\n      range.collapse(false); // Collapse to end\n      selection.removeAllRanges();\n      selection.addRange(range);\n    }\n  }\n\n  /**\n   * Public method to focus the input programmatically\n   */\n  focus(): void {\n    const editor = this.mentionEditor?.editorRef?.nativeElement;\n    if (editor) {\n      editor.focus();\n    }\n  }\n\n  /**\n   * Get mention chip data including configuration presets\n   */\n  getMentionChipsData(): Array<{ id: string; type: string; name: string; presetId?: string; presetName?: string }> {\n    return this.mentionEditor?.getMentionChipsData() || [];\n  }\n\n  /**\n   * Get pending attachments from the editor\n   */\n  getPendingAttachments(): PendingAttachment[] {\n    return this.mentionEditor?.getPendingAttachments() || [];\n  }\n\n  /**\n   * Open file picker programmatically\n   */\n  openFilePicker(): void {\n    this.mentionEditor?.openFilePicker();\n  }\n\n  /**\n   * Open artifact picker - emits event for parent to handle.\n   *\n   * TODO (2026-04-15): no consumer currently handles `artifactPickerRequested`.\n   * The prior handler was removed by commit 0a4612abf1 and the orphaned\n   * template was cleaned up in 7a063fc12a. The template button is disabled\n   * to signal the gap. See message-input-box.component.html for the TODO\n   * describing the suggested picker implementation.\n   */\n  openArtifactPicker(): void {\n    this.artifactPickerRequested.emit();\n  }\n\n  /**\n   * Add an artifact as a pending attachment (called by parent after artifact selection)\n   */\n  AddArtifactAttachment(artifact: {\n    fileID: string; fileName: string; mimeType: string;\n    sizeBytes: number; artifactVersionId?: string;\n  }): PendingAttachment | undefined {\n    return this.mentionEditor?.AddArtifactAttachment(artifact);\n  }\n}\n","<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      [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    </mj-mention-editor>\n\n    <!-- Attach + voice buttons - Positioned over editor -->\n    @if (enableAttachments || enableVoice) {\n      <div class=\"attach-buttons\">\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          TODO: \"Attach artifact from library\" button is not yet wired.\n\n          Current state (2026-04-15): emits `artifactPickerRequested` but no\n          consumer handles the event (handler was removed by commit 0a4612abf1,\n          orphaned template cleaned up in 7a063fc12a). Button is intentionally\n          visible but disabled so it's obvious what's missing.\n\n          To finish: build a picker modal (suggested approach: wrap the\n          `<mj-tree-dropdown>` used in dashboard-viewer's artifact-config-panel)\n          and on selection, attach the artifact version as a Direction='Input'\n          MJConversationDetailArtifact junction on the outgoing message.\n          The infrastructure for agents reading input artifacts is already in\n          place via AgentRunner.gatherConversationArtifacts().\n\n          See also: packages/Angular/Generic/artifacts/src/lib/services/analyze-artifact.service.ts\n          which does the similar end-to-end flow for standalone Analyze — the\n          attach-to-draft path is a strict subset (no artifact creation, no\n          conversation creation, just the junction).\n        -->\n        <button\n          class=\"attach-button-icon attach-artifact-button\"\n          [disabled]=\"true\"\n          (click)=\"openArtifactPicker(); $event.stopPropagation()\"\n          title=\"Attach artifact from library — not yet wired (see message-input-box.component.html TODO)\"\n          >\n          <i class=\"fa-solid fa-cube\"></i>\n        </button>\n        }\n        @if (enableVoice) {\n        <button\n          class=\"attach-button-icon voice-button-icon\"\n          [class.voice-button-icon--active]=\"voiceActive\"\n          [disabled]=\"!canStartVoice\"\n          (click)=\"onVoiceClick(); $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]=\"!canStartVoice\"\n          (click)=\"onVoiceOptionsClick(); $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"]}
+{"version":3,"file":"message-input-box.component.js","sourceRoot":"","sources":["../../../../src/lib/components/message/message-input-box.component.ts","../../../../src/lib/components/message/message-input-box.component.html"],"names":[],"mappings":"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","sourcesContent":["import { Component, Input, Output, EventEmitter, ViewChild } from '@angular/core';\nimport { UserInfo } from '@memberjunction/core';\nimport { MentionSuggestion } from '../../services/mention-autocomplete.service';\nimport { MentionEditorComponent, PendingAttachment } from '../mention/mention-editor.component';\n\n/**\n * Reusable message input box component (presentational)\n * Now uses MentionEditorComponent for rich @mention functionality with chips\n *\n * Handles:\n * - Text input with keyboard shortcuts via MentionEditorComponent\n * - @mention autocomplete with visual chips (contentEditable)\n * - Send button\n *\n * Does NOT handle:\n * - Saving messages to database\n * - Agent invocation\n * - Artifact creation\n * - Conversation management\n */\n@Component({\n  standalone: false,\n  selector: 'mj-message-input-box',\n  templateUrl: './message-input-box.component.html',\n  styleUrls: ['./message-input-box.component.css']\n})\nexport class MessageInputBoxComponent {\n  @ViewChild('mentionEditor') mentionEditor?: MentionEditorComponent;\n\n  @Input() placeholder: string = 'Type your message to start a new conversation...';\n  @Input() disabled: boolean = false;\n  @Input() value: string = '';\n  @Input() showCharacterCount: boolean = false;\n  @Input() enableMentions: boolean = true;\n  @Input() currentUser?: UserInfo;\n  @Input() rows: number = 3;\n\n  // Attachment settings\n  @Input() enableAttachments: boolean = true;\n  @Input() maxAttachments: number = 10;\n  @Input() maxAttachmentSizeBytes: number = 20 * 1024 * 1024; // 20MB\n  @Input() acceptedFileTypes: string = 'image/*';\n\n  /** Shows the in-composer mic button when true. */\n  @Input() enableRealtime: boolean = false;\n  /** Whether a realtime voice session is currently active (mic renders in its active state). */\n  @Input() voiceActive: boolean = false;\n  /** Whether a voice session can be started right now (mic disabled when false). */\n  @Input() canStartRealtime: boolean = true;\n  /** Shows the in-composer Plan Mode toggle button when true. */\n  @Input() enablePlanMode: boolean = false;\n  /** Current Plan Mode toggle state (renders the button in its active state). */\n  @Input() planModeActive: boolean = false;\n\n  @Output() textSubmitted = new EventEmitter<string>();\n  @Output() valueChange = new EventEmitter<string>();\n  @Output() attachmentsChanged = new EventEmitter<PendingAttachment[]>();\n  @Output() attachmentError = new EventEmitter<string>();\n  @Output() attachmentClicked = new EventEmitter<PendingAttachment>();\n  /** Emitted when the user clicks the mic button to start/stop a voice session. */\n  @Output() voiceRequested = new EventEmitter<void>();\n  /**\n   * Emitted when the user clicks the small caret next to the phone button — the host opens the\n   * voice agent/model picker so call options (which agent, which voice model) stay reachable\n   * without adding friction to the plain phone click's instant-start path.\n   */\n  @Output() voiceOptionsRequested = new EventEmitter<void>();\n  /** Emitted when the user clicks the in-composer Plan Mode toggle button. */\n  @Output() planModeToggle = new EventEmitter<void>();\n\n  onRealtimeClick(): void {\n    this.voiceRequested.emit();\n  }\n\n  onRealtimeOptionsClick(): void {\n    this.voiceOptionsRequested.emit();\n  }\n\n  get canSend(): boolean {\n    const hasText = this.value.trim().length > 0;\n    const hasAttachments = this.mentionEditor?.hasAttachments() || false;\n    return !this.disabled && (hasText || hasAttachments);\n  }\n\n  /**\n   * Handle value changes from MentionEditorComponent\n   */\n  onValueChange(newValue: string): void {\n    this.value = newValue;\n    this.valueChange.emit(this.value);\n  }\n\n  /**\n   * Handle attachment changes from MentionEditorComponent\n   */\n  onAttachmentsChanged(attachments: PendingAttachment[]): void {\n    this.attachmentsChanged.emit(attachments);\n  }\n\n  /**\n   * Handle attachment errors from MentionEditorComponent\n   */\n  onAttachmentError(error: string): void {\n    this.attachmentError.emit(error);\n  }\n\n  /**\n   * Handle attachment click from MentionEditorComponent\n   */\n  onAttachmentClicked(attachment: PendingAttachment): void {\n    this.attachmentClicked.emit(attachment);\n  }\n\n  /**\n   * Handle Enter key from MentionEditorComponent\n   * Extracts plain text with JSON-encoded mentions for message submission\n   */\n  onEnterPressed(_text: string): void {\n    this.onSendClick();\n  }\n\n  /**\n   * Handle mention selection from MentionEditorComponent\n   */\n  onMentionSelected(suggestion: MentionSuggestion): void {\n    // MentionEditorComponent already inserts the mention chip\n    // This is just for additional tracking/analytics if needed\n  }\n\n  /**\n   * Send the message\n   * Extracts plain text with JSON-encoded mentions for proper persistence\n   */\n  onSendClick(): void {\n    if (this.canSend) {\n      // Get plain text with JSON-encoded mentions (preserves configuration info)\n      const textToSend = this.mentionEditor?.getPlainTextWithJsonMentions() || this.value.trim();\n      this.textSubmitted.emit(textToSend);\n      this.value = ''; // Clear input after sending\n\n      // Clear the editor content\n      if (this.mentionEditor) {\n        this.mentionEditor.clear();\n      }\n\n      this.valueChange.emit(this.value);\n    }\n  }\n\n  /**\n   * Handle clicks on the container - focus the mention editor\n   * Only moves cursor to end if clicking outside the contentEditable area\n   */\n  onContainerClick(event: MouseEvent): void {\n    const target = event.target as HTMLElement;\n\n    // Don't handle clicks on the send button\n    if (target.closest('.send-button-icon')) {\n      return;\n    }\n\n    const editor = this.mentionEditor?.editorRef?.nativeElement;\n    if (!editor) return;\n\n    // If clicking directly on the editor or its children, let the browser handle cursor placement\n    if (target === editor || editor.contains(target)) {\n      return;\n    }\n\n    // Only if clicking on the container (empty space), focus and move cursor to end\n    editor.focus();\n    const selection = window.getSelection();\n    const range = document.createRange();\n\n    if (selection) {\n      range.selectNodeContents(editor);\n      range.collapse(false); // Collapse to end\n      selection.removeAllRanges();\n      selection.addRange(range);\n    }\n  }\n\n  /**\n   * Public method to focus the input programmatically\n   */\n  focus(): void {\n    const editor = this.mentionEditor?.editorRef?.nativeElement;\n    if (editor) {\n      editor.focus();\n    }\n  }\n\n  /**\n   * Get mention chip data including configuration presets\n   */\n  getMentionChipsData(): Array<{ id: string; type: string; name: string; presetId?: string; presetName?: string }> {\n    return this.mentionEditor?.getMentionChipsData() || [];\n  }\n\n  /**\n   * Get pending attachments from the editor\n   */\n  getPendingAttachments(): PendingAttachment[] {\n    return this.mentionEditor?.getPendingAttachments() || [];\n  }\n\n  /**\n   * Open file picker programmatically\n   */\n  openFilePicker(): void {\n    this.mentionEditor?.openFilePicker();\n  }\n\n  /**\n   * Add an artifact as a pending attachment (called by parent after artifact selection)\n   */\n  AddArtifactAttachment(artifact: {\n    fileID: string; fileName: string; mimeType: string;\n    sizeBytes: number; artifactVersionId?: string;\n  }): PendingAttachment | undefined {\n    return this.mentionEditor?.AddArtifactAttachment(artifact);\n  }\n}\n","<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      [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    </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 — 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"]}