@memberjunction/ng-conversations 5.47.0 → 5.49.0

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

@@ -67,6 +67,8 @@ export class MessageInputComponent extends BaseAngularComponent {
     parentMessageId; // Optional: for replying in threads
     enableAttachments = true; // Whether to show attachment button (based on agent modality support)
     enableMentions = true; // Whether to enable @-mention autocomplete (agents/users). Hosts addressing a single fixed agent (e.g. Form Builder cockpit) typically set false.
+    enablePlanMode = true; // Whether the composer shows the Plan Mode toggle. Hosts that don't expose plan-mode workflows set false.
+    enableRealtime = true; // Whether the composer shows the realtime voice-call launcher/options. Hosts without a voice experience set false.
     maxAttachments = 10; // Maximum number of attachments per message
     maxAttachmentSizeBytes = 20 * 1024 * 1024; // Maximum size per attachment (20MB default)
     acceptedFileTypes = 'image/*'; // Accepted MIME types pattern
@@ -252,6 +254,125 @@ export class MessageInputComponent extends BaseAngularComponent {
     uploadStateChanged = new EventEmitter(); // Emits when attachment upload state changes
     inputBox;
     messageText = '';
+    /**
+     * Prefills the composer with draft text WITHOUT sending (unlike pendingMessage,
+     * which auto-sends) and focuses the input — e.g. the omnibar's '@agent' flow
+     * lands in chat with '@AgentName ' staged so the user just types their ask.
+     */
+    /**
+     * Draft text to stage in the composer when this input mounts (NOT sent — unlike
+     * pendingMessage). Applied once per distinct value, view-readiness-proof: if the
+     * view isn't up yet, ngAfterViewInit applies it. Emits initialDraftApplied so the
+     * host can clear its pending state.
+     */
+    set initialDraft(value) {
+        if (value && value !== this.appliedInitialDraft) {
+            this.appliedInitialDraft = value;
+            if (this.inputBox) {
+                this.SetDraft(value, true);
+                this.initialDraftApplied.emit();
+            }
+            else {
+                this.pendingInitialDraft = value;
+            }
+        }
+    }
+    get initialDraft() {
+        return this.appliedInitialDraft;
+    }
+    appliedInitialDraft = null;
+    pendingInitialDraft = null;
+    initialDraftApplied = new EventEmitter();
+    /**
+     * Live draft-state signal: fires on every composer value change with the
+     * SERIALIZED content (mention pills encoded via getPlainTextWithJsonMentions,
+     * so hosts can persist drafts losslessly). Empty string = draft cleared.
+     */
+    DraftStateChanged = new EventEmitter();
+    /** The composer lost focus — hosts flush persisted drafts on this. */
+    ComposerBlurred = new EventEmitter();
+    /** Handles the composer's value stream: keeps messageText in sync + emits draft state. */
+    OnComposerValueChanged(value) {
+        this.messageText = value;
+        this.DraftStateChanged.emit(this.GetSerializedDraft());
+    }
+    /** Current composer content in the lossless serialized form ('' when empty). */
+    GetSerializedDraft() {
+        const serialized = this.inputBox?.getPlainTextWithJsonMentions() ?? this.messageText ?? '';
+        return serialized.trim().length === 0 ? '' : serialized;
+    }
+    /**
+     * Pre-addresses the composer to an agent as a RESOLVED mention pill (+ trailing
+     * space, caret after, focused) — identical to the user typing '@agent' and picking
+     * it from the dropdown. Resolves the agent through MentionAutocompleteService so
+     * the chip carries the agent's real id/icon/presets; falls back to a plain-text
+     * '@Name ' draft when the agent can't be resolved (e.g. name mismatch).
+     *
+     * @returns false while the composer view isn't mounted yet — callers may retry.
+     */
+    async InsertAgentMention(agentName, focus = true, clearExisting = true) {
+        if (!this.inputBox) {
+            console.log(`[Omnibar→Chat] InsertAgentMention('${agentName}'): input box not mounted yet — caller will retry`);
+            return false;
+        }
+        if (clearExisting) {
+            // Pre-addressing REPLACES any un-sent draft (tagging agent B after agent A
+            // must not stack pills).
+            this.inputBox.mentionEditor?.clear();
+            this.messageText = '';
+        }
+        try {
+            if (!this.mentionAutocomplete.IsInitialized && this.currentUser) {
+                console.log(`[Omnibar→Chat] InsertAgentMention('${agentName}'): initializing mention autocomplete…`);
+                await this.mentionAutocomplete.initialize(this.currentUser);
+            }
+            const wanted = agentName.trim().toLowerCase();
+            const suggestion = this.mentionAutocomplete
+                .getSuggestions(agentName, false, '@')
+                .find(s => s.type === 'agent' && s.name.trim().toLowerCase() === wanted);
+            if (suggestion) {
+                const inserted = this.inputBox.InsertMention(suggestion, focus);
+                console.log(`[Omnibar→Chat] InsertAgentMention('${agentName}'): resolved to pill (id=${suggestion.id}) — insert ${inserted ? 'OK' : 'FAILED (editor view not ready)'}`);
+                if (inserted) {
+                    if (focus) {
+                        this.scheduleFocusReassert(agentName);
+                    }
+                    return true;
+                }
+                return false; // editor view not mounted — caller retries
+            }
+            console.warn(`[Omnibar→Chat] InsertAgentMention('${agentName}'): agent NOT found in autocomplete (initialized=${this.mentionAutocomplete.IsInitialized}) — falling back to plain text`);
+        }
+        catch (e) {
+            console.warn(`[Omnibar→Chat] InsertAgentMention('${agentName}'): resolution error — falling back to plain text`, e);
+        }
+        const mention = agentName.includes(' ') ? `@"${agentName}" ` : `@${agentName} `;
+        this.SetDraft(mention, focus);
+        return true;
+    }
+    /**
+     * The insert happens mid-tab-mount; late-arriving chat UI (lists, empty-state
+     * autofocus, tab chrome) can steal focus AFTER we set it. Re-assert at settle
+     * points — only when focus genuinely left the editor, so we never fight the user.
+     */
+    scheduleFocusReassert(context) {
+        for (const delay of [300, 900, 1800]) {
+            setTimeout(() => {
+                const editor = this.inputBox?.mentionEditor;
+                if (editor && !editor.HasFocus) {
+                    const ok = editor.FocusCaretAtEnd();
+                    console.log(`[Omnibar→Chat] focus re-assert (+${delay}ms) for '${context}': ${ok ? 'refocused' : 'editor gone'}`);
+                }
+            }, delay);
+        }
+    }
+    SetDraft(text, focus = true) {
+        this.messageText = text;
+        if (focus) {
+            // The composer mounts/binds on the next tick after messageText flows down.
+            setTimeout(() => this.inputBox?.focus(), 50);
+        }
+    }
     isSending = false;
     isProcessing = false; // True when waiting for agent/naming response
     processingMessage = 'AI is responding...'; // Message shown during processing
@@ -313,6 +434,15 @@ export class MessageInputComponent extends BaseAngularComponent {
         // Note: initialMessage/initialAttachments handled by setters, inProgressMessageIds handled by setter
     }
     ngAfterViewInit() {
+        if (this.pendingInitialDraft) {
+            const draft = this.pendingInitialDraft;
+            this.pendingInitialDraft = null;
+            // next tick — the composer's own view finishes mounting first
+            setTimeout(() => {
+                this.SetDraft(draft, true);
+                this.initialDraftApplied.emit();
+            }, 50);
+        }
         // Focus input on initial load
         this.focusInput();
         // Mark component as ready
@@ -2362,13 +2492,12 @@ export class MessageInputComponent extends BaseAngularComponent {
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.inputBox = _t.first);
-        } }, inputs: { conversationId: "conversationId", conversationName: "conversationName", currentUser: "currentUser", disabled: "disabled", placeholder: "placeholder", parentMessageId: "parentMessageId", enableAttachments: "enableAttachments", enableMentions: "enableMentions", maxAttachments: "maxAttachments", maxAttachmentSizeBytes: "maxAttachmentSizeBytes", acceptedFileTypes: "acceptedFileTypes", artifactsByDetailId: "artifactsByDetailId", systemArtifactsByDetailId: "systemArtifactsByDetailId", agentRunsByDetailId: "agentRunsByDetailId", emptyStateMode: "emptyStateMode", appContext: "appContext", defaultAgentId: "defaultAgentId", conversationDefaultAgentId: "conversationDefaultAgentId", agentConfigurationPresetId: "agentConfigurationPresetId", initialMessage: "initialMessage", initialAttachments: "initialAttachments", conversationHistory: "conversationHistory", inProgressMessageIds: "inProgressMessageIds", applicationId: "applicationId" }, outputs: { messageSent: "messageSent", agentResponse: "agentResponse", beforeAgentTurn: "beforeAgentTurn", afterAgentTurn: "afterAgentTurn", agentRunDetected: "agentRunDetected", agentRunUpdate: "agentRunUpdate", messageComplete: "messageComplete", artifactCreated: "artifactCreated", conversationRenamed: "conversationRenamed", intentCheckStarted: "intentCheckStarted", intentCheckCompleted: "intentCheckCompleted", initialMessageAutoSendStarted: "initialMessageAutoSendStarted", initialMessageAutoSendFailed: "initialMessageAutoSendFailed", emptyStateSubmit: "emptyStateSubmit", uploadStateChanged: "uploadStateChanged" }, standalone: false, features: [i0.ɵɵInheritDefinitionFeature, i0.ɵɵNgOnChangesFeature], decls: 6, vars: 23, consts: [["pickerOrigin", "cdkOverlayOrigin"], ["inputBox", ""], ["cdkOverlayOrigin", "", 1, "message-input-wrapper"], [1, "processing-indicator"], [3, "valueChange", "textSubmitted", "attachmentsChanged", "attachmentError", "voiceRequested", "voiceOptionsRequested", "planModeToggle", "placeholder", "disabled", "showCharacterCount", "enableMentions", "enableAttachments", "maxAttachments", "maxAttachmentSizeBytes", "acceptedFileTypes", "currentUser", "Provider", "rows", "enableRealtime", "voiceActive", "canStartRealtime", "enablePlanMode", "planModeActive", "value"], ["cdkConnectedOverlay", "", "cdkConnectedOverlayBackdropClass", "cdk-overlay-transparent-backdrop", 3, "backdropClick", "detach", "cdkConnectedOverlayOrigin", "cdkConnectedOverlayOpen", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPush", "cdkConnectedOverlayHasBackdrop"], [1, "fas", "fa-circle-notch", "fa-spin"], [3, "AgentPicked", "Cancelled", "Provider", "Agents", "DefaultAgentId", "CoAgents", "DefaultCoAgentId"]], template: function MessageInputComponent_Template(rf, ctx) { if (rf & 1) {
+        } }, inputs: { conversationId: "conversationId", conversationName: "conversationName", currentUser: "currentUser", disabled: "disabled", placeholder: "placeholder", parentMessageId: "parentMessageId", enableAttachments: "enableAttachments", enableMentions: "enableMentions", enablePlanMode: "enablePlanMode", enableRealtime: "enableRealtime", maxAttachments: "maxAttachments", maxAttachmentSizeBytes: "maxAttachmentSizeBytes", acceptedFileTypes: "acceptedFileTypes", artifactsByDetailId: "artifactsByDetailId", systemArtifactsByDetailId: "systemArtifactsByDetailId", agentRunsByDetailId: "agentRunsByDetailId", emptyStateMode: "emptyStateMode", appContext: "appContext", defaultAgentId: "defaultAgentId", conversationDefaultAgentId: "conversationDefaultAgentId", agentConfigurationPresetId: "agentConfigurationPresetId", initialMessage: "initialMessage", initialAttachments: "initialAttachments", conversationHistory: "conversationHistory", inProgressMessageIds: "inProgressMessageIds", applicationId: "applicationId", initialDraft: "initialDraft" }, outputs: { messageSent: "messageSent", agentResponse: "agentResponse", beforeAgentTurn: "beforeAgentTurn", afterAgentTurn: "afterAgentTurn", agentRunDetected: "agentRunDetected", agentRunUpdate: "agentRunUpdate", messageComplete: "messageComplete", artifactCreated: "artifactCreated", conversationRenamed: "conversationRenamed", intentCheckStarted: "intentCheckStarted", intentCheckCompleted: "intentCheckCompleted", initialMessageAutoSendStarted: "initialMessageAutoSendStarted", initialMessageAutoSendFailed: "initialMessageAutoSendFailed", emptyStateSubmit: "emptyStateSubmit", uploadStateChanged: "uploadStateChanged", initialDraftApplied: "initialDraftApplied", DraftStateChanged: "DraftStateChanged", ComposerBlurred: "ComposerBlurred" }, standalone: false, features: [i0.ɵɵInheritDefinitionFeature, i0.ɵɵNgOnChangesFeature], decls: 6, vars: 23, consts: [["pickerOrigin", "cdkOverlayOrigin"], ["inputBox", ""], ["cdkOverlayOrigin", "", 1, "message-input-wrapper"], [1, "processing-indicator"], [3, "valueChange", "blurred", "textSubmitted", "attachmentsChanged", "attachmentError", "voiceRequested", "voiceOptionsRequested", "planModeToggle", "placeholder", "disabled", "showCharacterCount", "enableMentions", "enableAttachments", "maxAttachments", "maxAttachmentSizeBytes", "acceptedFileTypes", "currentUser", "Provider", "rows", "enableRealtime", "voiceActive", "canStartRealtime", "enablePlanMode", "planModeActive", "value"], ["cdkConnectedOverlay", "", "cdkConnectedOverlayBackdropClass", "cdk-overlay-transparent-backdrop", 3, "backdropClick", "detach", "cdkConnectedOverlayOrigin", "cdkConnectedOverlayOpen", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPush", "cdkConnectedOverlayHasBackdrop"], [1, "fas", "fa-circle-notch", "fa-spin"], [3, "AgentPicked", "Cancelled", "Provider", "Agents", "DefaultAgentId", "CoAgents", "DefaultCoAgentId"]], template: function MessageInputComponent_Template(rf, ctx) { if (rf & 1) {
             const _r1 = i0.ɵɵgetCurrentView();
             i0.ɵɵelementStart(0, "div", 2, 0);
             i0.ɵɵconditionalCreate(2, MessageInputComponent_Conditional_2_Template, 4, 1, "div", 3);
             i0.ɵɵelementStart(3, "mj-ai-composer", 4, 1);
-            i0.ɵɵtwoWayListener("valueChange", function MessageInputComponent_Template_mj_ai_composer_valueChange_3_listener($event) { i0.ɵɵrestoreView(_r1); i0.ɵɵtwoWayBindingSet(ctx.messageText, $event) || (ctx.messageText = $event); return i0.ɵɵresetView($event); });
-            i0.ɵɵlistener("textSubmitted", function MessageInputComponent_Template_mj_ai_composer_textSubmitted_3_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onTextSubmitted($event)); })("attachmentsChanged", function MessageInputComponent_Template_mj_ai_composer_attachmentsChanged_3_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onAttachmentsChanged($event)); })("attachmentError", function MessageInputComponent_Template_mj_ai_composer_attachmentError_3_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onAttachmentError($event)); })("voiceRequested", function MessageInputComponent_Template_mj_ai_composer_voiceRequested_3_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onStartRealtime()); })("voiceOptionsRequested", function MessageInputComponent_Template_mj_ai_composer_voiceOptionsRequested_3_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onRealtimeOptions()); })("planModeToggle", function MessageInputComponent_Template_mj_ai_composer_planModeToggle_3_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.TogglePlanMode()); });
+            i0.ɵɵlistener("valueChange", function MessageInputComponent_Template_mj_ai_composer_valueChange_3_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.OnComposerValueChanged($event)); })("blurred", function MessageInputComponent_Template_mj_ai_composer_blurred_3_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.ComposerBlurred.emit()); })("textSubmitted", function MessageInputComponent_Template_mj_ai_composer_textSubmitted_3_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onTextSubmitted($event)); })("attachmentsChanged", function MessageInputComponent_Template_mj_ai_composer_attachmentsChanged_3_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onAttachmentsChanged($event)); })("attachmentError", function MessageInputComponent_Template_mj_ai_composer_attachmentError_3_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onAttachmentError($event)); })("voiceRequested", function MessageInputComponent_Template_mj_ai_composer_voiceRequested_3_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onStartRealtime()); })("voiceOptionsRequested", function MessageInputComponent_Template_mj_ai_composer_voiceOptionsRequested_3_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onRealtimeOptions()); })("planModeToggle", function MessageInputComponent_Template_mj_ai_composer_planModeToggle_3_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.TogglePlanMode()); });
             i0.ɵɵelementEnd();
             i0.ɵɵtemplate(5, MessageInputComponent_ng_template_5_Template, 1, 5, "ng-template", 5);
             i0.ɵɵlistener("backdropClick", function MessageInputComponent_Template_ng_template_backdropClick_5_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onRealtimeAgentPickerCancelled()); })("detach", function MessageInputComponent_Template_ng_template_detach_5_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onRealtimeAgentPickerCancelled()); });
@@ -2378,15 +2507,14 @@ export class MessageInputComponent extends BaseAngularComponent {
             i0.ɵɵadvance(2);
             i0.ɵɵconditional(ctx.isProcessing ? 2 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵproperty("placeholder", ctx.placeholder)("disabled", ctx.disabled || ctx.isProcessing)("showCharacterCount", false)("enableMentions", ctx.enableMentions)("enableAttachments", ctx.enableAttachments)("maxAttachments", ctx.maxAttachments)("maxAttachmentSizeBytes", ctx.maxAttachmentSizeBytes)("acceptedFileTypes", ctx.acceptedFileTypes)("currentUser", ctx.currentUser)("Provider", ctx.Provider)("rows", 3)("enableRealtime", true)("voiceActive", ctx.voiceActive)("canStartRealtime", ctx.canStartRealtime)("enablePlanMode", true)("planModeActive", ctx.PlanModeEnabled);
-            i0.ɵɵtwoWayProperty("value", ctx.messageText);
+            i0.ɵɵproperty("placeholder", ctx.placeholder)("disabled", ctx.disabled || ctx.isProcessing)("showCharacterCount", false)("enableMentions", ctx.enableMentions)("enableAttachments", ctx.enableAttachments)("maxAttachments", ctx.maxAttachments)("maxAttachmentSizeBytes", ctx.maxAttachmentSizeBytes)("acceptedFileTypes", ctx.acceptedFileTypes)("currentUser", ctx.currentUser)("Provider", ctx.Provider)("rows", 3)("enableRealtime", ctx.enableRealtime)("voiceActive", ctx.voiceActive)("canStartRealtime", ctx.canStartRealtime)("enablePlanMode", ctx.enablePlanMode)("planModeActive", ctx.PlanModeEnabled)("value", ctx.messageText);
             i0.ɵɵadvance(2);
             i0.ɵɵproperty("cdkConnectedOverlayOrigin", pickerOrigin_r4)("cdkConnectedOverlayOpen", ctx.showRealtimeAgentPicker)("cdkConnectedOverlayPositions", ctx.pickerOverlayPositions)("cdkConnectedOverlayPush", true)("cdkConnectedOverlayHasBackdrop", true);
         } }, dependencies: [i11.CdkConnectedOverlay, i11.CdkOverlayOrigin, i12.RealtimeAgentPickerComponent, i13.AiComposerComponent], styles: [".message-input-wrapper[_ngcontent-%COMP%] {\n  position: relative;\n  width: 100%;\n}\n\n\n\n\n\n.processing-indicator[_ngcontent-%COMP%] {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  padding: 0.75rem 1.25rem;\n  background: color-mix(in srgb, var(--mj-bg-surface-card) 95%, transparent);\n  border-radius: 8px;\n  box-shadow: var(--mj-shadow-sm);\n  z-index: 10;\n  pointer-events: none;\n}\n.processing-indicator[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n}\n.processing-indicator[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] {\n  font-size: 0.9rem;\n  color: var(--mj-text-primary);\n}"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MessageInputComponent, [{
         type: Component,
-        args: [{ standalone: false, selector: 'mj-message-input', template: "<div class=\"message-input-wrapper\" cdkOverlayOrigin #pickerOrigin=\"cdkOverlayOrigin\">\n  <!-- Processing Indicator Overlay -->\n  @if (isProcessing) {\n    <div class=\"processing-indicator\">\n      <i class=\"fas fa-circle-notch fa-spin\"></i>\n      <span>{{ processingMessage }}</span>\n    </div>\n  }\n\n  <!-- AI composer (mic + Plan Mode buttons live in its in-composer toolbar): wraps the\n       generic mj-message-input-box with the '@' agent / '#' record / '/' skill trigger\n       plugins built in \u2014 all three on by default, preserving the standard chat behavior. -->\n  <mj-ai-composer\n    #inputBox\n    [placeholder]=\"placeholder\"\n    [disabled]=\"disabled || isProcessing\"\n    [showCharacterCount]=\"false\"\n    [enableMentions]=\"enableMentions\"\n    [enableAttachments]=\"enableAttachments\"\n    [maxAttachments]=\"maxAttachments\"\n    [maxAttachmentSizeBytes]=\"maxAttachmentSizeBytes\"\n    [acceptedFileTypes]=\"acceptedFileTypes\"\n    [currentUser]=\"currentUser\"\n    [Provider]=\"Provider\"\n    [rows]=\"3\"\n    [enableRealtime]=\"true\"\n    [voiceActive]=\"voiceActive\"\n    [canStartRealtime]=\"canStartRealtime\"\n    [enablePlanMode]=\"true\"\n    [planModeActive]=\"PlanModeEnabled\"\n    [(value)]=\"messageText\"\n    (textSubmitted)=\"onTextSubmitted($event)\"\n    (attachmentsChanged)=\"onAttachmentsChanged($event)\"\n    (attachmentError)=\"onAttachmentError($event)\"\n    (voiceRequested)=\"onStartRealtime()\"\n    (voiceOptionsRequested)=\"onRealtimeOptions()\"\n    (planModeToggle)=\"TogglePlanMode()\">\n  </mj-ai-composer>\n\n  <!-- Voice agent/co-agent/model picker \u2014 shown when starting a call on a conversation\n       with NO prior agent participation, or on demand via the caret next to the phone\n       button (any conversation). Rendered in a body-level CDK overlay anchored above the\n       composer so it POPS OUT of the chat overlay's clipping border instead of being cut\n       off at the top of a narrow (~390px) overlay. -->\n  <ng-template\n    cdkConnectedOverlay\n    [cdkConnectedOverlayOrigin]=\"pickerOrigin\"\n    [cdkConnectedOverlayOpen]=\"showRealtimeAgentPicker\"\n    [cdkConnectedOverlayPositions]=\"pickerOverlayPositions\"\n    [cdkConnectedOverlayPush]=\"true\"\n    [cdkConnectedOverlayHasBackdrop]=\"true\"\n    cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n    (backdropClick)=\"onRealtimeAgentPickerCancelled()\"\n    (detach)=\"onRealtimeAgentPickerCancelled()\">\n    <mj-realtime-agent-picker\n      [Provider]=\"Provider\"\n      [Agents]=\"voicePickerAgents\"\n      [DefaultAgentId]=\"voicePickerDefaultAgentId\"\n      [CoAgents]=\"voicePickerCoAgents\"\n      [DefaultCoAgentId]=\"voicePickerDefaultCoAgentId\"\n      (AgentPicked)=\"onRealtimeAgentPicked($event)\"\n      (Cancelled)=\"onRealtimeAgentPickerCancelled()\">\n    </mj-realtime-agent-picker>\n  </ng-template>\n</div>\n\n<!-- The voice \"call mode\" overlay is hosted by <mj-conversation-chat-area> (it fills the\n     whole conversation panel in place); this component only owns the trigger wiring. -->\n", styles: [".message-input-wrapper {\n  position: relative;\n  width: 100%;\n}\n\n/* Plan Mode moved into the in-composer toolbar (message-input-box) as a toggle icon button\n   next to the attachment/voice buttons \u2014 see .plan-mode-button-icon there. */\n\n.processing-indicator {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  padding: 0.75rem 1.25rem;\n  background: color-mix(in srgb, var(--mj-bg-surface-card) 95%, transparent);\n  border-radius: 8px;\n  box-shadow: var(--mj-shadow-sm);\n  z-index: 10;\n  pointer-events: none;\n}\n.processing-indicator i {\n  color: var(--mj-brand-primary);\n}\n.processing-indicator span {\n  font-size: 0.9rem;\n  color: var(--mj-text-primary);\n}\n"] }]
+        args: [{ standalone: false, selector: 'mj-message-input', template: "<div class=\"message-input-wrapper\" cdkOverlayOrigin #pickerOrigin=\"cdkOverlayOrigin\">\n  <!-- Processing Indicator Overlay -->\n  @if (isProcessing) {\n    <div class=\"processing-indicator\">\n      <i class=\"fas fa-circle-notch fa-spin\"></i>\n      <span>{{ processingMessage }}</span>\n    </div>\n  }\n\n  <!-- AI composer (mic + Plan Mode buttons live in its in-composer toolbar): wraps the\n       generic mj-message-input-box with the '@' agent / '#' record / '/' skill trigger\n       plugins built in \u2014 all three on by default, preserving the standard chat behavior. -->\n  <mj-ai-composer\n    #inputBox\n    [placeholder]=\"placeholder\"\n    [disabled]=\"disabled || isProcessing\"\n    [showCharacterCount]=\"false\"\n    [enableMentions]=\"enableMentions\"\n    [enableAttachments]=\"enableAttachments\"\n    [maxAttachments]=\"maxAttachments\"\n    [maxAttachmentSizeBytes]=\"maxAttachmentSizeBytes\"\n    [acceptedFileTypes]=\"acceptedFileTypes\"\n    [currentUser]=\"currentUser\"\n    [Provider]=\"Provider\"\n    [rows]=\"3\"\n    [enableRealtime]=\"enableRealtime\"\n    [voiceActive]=\"voiceActive\"\n    [canStartRealtime]=\"canStartRealtime\"\n    [enablePlanMode]=\"enablePlanMode\"\n    [planModeActive]=\"PlanModeEnabled\"\n    [value]=\"messageText\"\n    (valueChange)=\"OnComposerValueChanged($event)\"\n    (blurred)=\"ComposerBlurred.emit()\"\n    (textSubmitted)=\"onTextSubmitted($event)\"\n    (attachmentsChanged)=\"onAttachmentsChanged($event)\"\n    (attachmentError)=\"onAttachmentError($event)\"\n    (voiceRequested)=\"onStartRealtime()\"\n    (voiceOptionsRequested)=\"onRealtimeOptions()\"\n    (planModeToggle)=\"TogglePlanMode()\">\n  </mj-ai-composer>\n\n  <!-- Voice agent/co-agent/model picker \u2014 shown when starting a call on a conversation\n       with NO prior agent participation, or on demand via the caret next to the phone\n       button (any conversation). Rendered in a body-level CDK overlay anchored above the\n       composer so it POPS OUT of the chat overlay's clipping border instead of being cut\n       off at the top of a narrow (~390px) overlay. -->\n  <ng-template\n    cdkConnectedOverlay\n    [cdkConnectedOverlayOrigin]=\"pickerOrigin\"\n    [cdkConnectedOverlayOpen]=\"showRealtimeAgentPicker\"\n    [cdkConnectedOverlayPositions]=\"pickerOverlayPositions\"\n    [cdkConnectedOverlayPush]=\"true\"\n    [cdkConnectedOverlayHasBackdrop]=\"true\"\n    cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n    (backdropClick)=\"onRealtimeAgentPickerCancelled()\"\n    (detach)=\"onRealtimeAgentPickerCancelled()\">\n    <mj-realtime-agent-picker\n      [Provider]=\"Provider\"\n      [Agents]=\"voicePickerAgents\"\n      [DefaultAgentId]=\"voicePickerDefaultAgentId\"\n      [CoAgents]=\"voicePickerCoAgents\"\n      [DefaultCoAgentId]=\"voicePickerDefaultCoAgentId\"\n      (AgentPicked)=\"onRealtimeAgentPicked($event)\"\n      (Cancelled)=\"onRealtimeAgentPickerCancelled()\">\n    </mj-realtime-agent-picker>\n  </ng-template>\n</div>\n\n<!-- The voice \"call mode\" overlay is hosted by <mj-conversation-chat-area> (it fills the\n     whole conversation panel in place); this component only owns the trigger wiring. -->\n", styles: [".message-input-wrapper {\n  position: relative;\n  width: 100%;\n}\n\n/* Plan Mode moved into the in-composer toolbar (message-input-box) as a toggle icon button\n   next to the attachment/voice buttons \u2014 see .plan-mode-button-icon there. */\n\n.processing-indicator {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  padding: 0.75rem 1.25rem;\n  background: color-mix(in srgb, var(--mj-bg-surface-card) 95%, transparent);\n  border-radius: 8px;\n  box-shadow: var(--mj-shadow-sm);\n  z-index: 10;\n  pointer-events: none;\n}\n.processing-indicator i {\n  color: var(--mj-brand-primary);\n}\n.processing-indicator span {\n  font-size: 0.9rem;\n  color: var(--mj-text-primary);\n}\n"] }]
     }], () => [{ type: i1.DialogService }, { type: i2.ToastService }, { type: i3.ConversationAgentService }, { type: i4.DataCacheService }, { type: i5.ActiveTasksService }, { type: i6.ConversationStreamingService }, { type: i7.MentionParserService }, { type: i8.ConversationAttachmentService }, { type: i9.ConversationBridgeService }, { type: i10.RealtimeSessionService }], { conversationId: [{
             type: Input
         }], conversationName: [{
@@ -2403,6 +2531,10 @@ export class MessageInputComponent extends BaseAngularComponent {
             type: Input
         }], enableMentions: [{
             type: Input
+        }], enablePlanMode: [{
+            type: Input
+        }], enableRealtime: [{
+            type: Input
         }], maxAttachments: [{
             type: Input
         }], maxAttachmentSizeBytes: [{
@@ -2468,6 +2600,14 @@ export class MessageInputComponent extends BaseAngularComponent {
         }], inputBox: [{
             type: ViewChild,
             args: ['inputBox']
+        }], initialDraft: [{
+            type: Input
+        }], initialDraftApplied: [{
+            type: Output
+        }], DraftStateChanged: [{
+            type: Output
+        }], ComposerBlurred: [{
+            type: Output
         }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MessageInputComponent, { className: "MessageInputComponent", filePath: "src/lib/components/message/message-input.component.ts", lineNumber: 45 }); })();
 //# sourceMappingURL=message-input.component.js.map