@memberjunction/ng-conversations 5.44.0 → 5.45.1

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

@@ -1,327 +0,0 @@
-import { Component, Input, Output, EventEmitter, ViewChild } from '@angular/core';
-import * as i0 from "@angular/core";
-import * as i1 from "@angular/forms";
-import * as i2 from "../mention/mention-editor.component";
-const _c0 = ["mentionEditor"];
-function MessageInputBoxComponent_Conditional_4_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    const _r2 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 9);
-    i0.ɵɵlistener("click", function MessageInputBoxComponent_Conditional_4_Conditional_1_Template_button_click_0_listener($event) { i0.ɵɵrestoreView(_r2); const ctx_r2 = i0.ɵɵnextContext(2); ctx_r2.planModeToggle.emit(); return i0.ɵɵresetView($event.stopPropagation()); });
-    i0.ɵɵelement(1, "i", 10);
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const ctx_r2 = i0.ɵɵnextContext(2);
-    i0.ɵɵclassProp("plan-mode-button-icon--active", ctx_r2.planModeActive);
-    i0.ɵɵproperty("disabled", ctx_r2.disabled)("title", ctx_r2.planModeActive ? "Plan Mode ON \u2014 the agent presents a plan for your approval before it acts" : "Plan Mode: have the agent present a plan for your approval before it acts");
-    i0.ɵɵattribute("aria-pressed", ctx_r2.planModeActive);
-} }
-function MessageInputBoxComponent_Conditional_4_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    const _r4 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 11);
-    i0.ɵɵlistener("click", function MessageInputBoxComponent_Conditional_4_Conditional_2_Template_button_click_0_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r2 = i0.ɵɵnextContext(2); ctx_r2.openFilePicker(); return i0.ɵɵresetView($event.stopPropagation()); });
-    i0.ɵɵelement(1, "i", 12);
-    i0.ɵɵelementEnd();
-} 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.canStartRealtime)("title", ctx_r2.voiceActive ? "Voice call active" : "Start a voice call");
-    i0.ɵɵadvance(2);
-    i0.ɵɵproperty("disabled", !ctx_r2.canStartRealtime);
-} }
-function MessageInputBoxComponent_Conditional_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 4);
-    i0.ɵɵconditionalCreate(1, MessageInputBoxComponent_Conditional_4_Conditional_1_Template, 2, 5, "button", 7);
-    i0.ɵɵconditionalCreate(2, MessageInputBoxComponent_Conditional_4_Conditional_2_Template, 2, 1, "button", 8);
-    i0.ɵɵconditionalCreate(3, MessageInputBoxComponent_Conditional_4_Conditional_3_Template, 4, 5);
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const ctx_r2 = i0.ɵɵnextContext();
-    i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r2.enablePlanMode ? 1 : -1);
-    i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r2.enableAttachments ? 2 : -1);
-    i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r2.enableRealtime ? 3 : -1);
-} }
-/**
- * Reusable message input box component (presentational)
- * Now uses MentionEditorComponent for rich @mention functionality with chips
- *
- * Handles:
- * - Text input with keyboard shortcuts via MentionEditorComponent
- * - @mention autocomplete with visual chips (contentEditable)
- * - Send button
- *
- * Does NOT handle:
- * - Saving messages to database
- * - Agent invocation
- * - Artifact creation
- * - Conversation management
- */
-export class MessageInputBoxComponent {
-    mentionEditor;
-    placeholder = 'Type your message to start a new conversation...';
-    disabled = false;
-    value = '';
-    showCharacterCount = false;
-    enableMentions = true;
-    currentUser;
-    rows = 3;
-    // Attachment settings
-    enableAttachments = true;
-    maxAttachments = 10;
-    maxAttachmentSizeBytes = 20 * 1024 * 1024; // 20MB
-    acceptedFileTypes = 'image/*';
-    /** Shows the in-composer mic button when true. */
-    enableRealtime = false;
-    /** Whether a realtime voice session is currently active (mic renders in its active state). */
-    voiceActive = false;
-    /** Whether a voice session can be started right now (mic disabled when false). */
-    canStartRealtime = true;
-    /** 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();
-    /** Emitted when the user clicks the mic button to start/stop a voice session. */
-    voiceRequested = new EventEmitter();
-    /**
-     * Emitted when the user clicks the small caret next to the phone button — the host opens the
-     * voice agent/model picker so call options (which agent, which voice model) stay reachable
-     * without adding friction to the plain phone click's instant-start path.
-     */
-    voiceOptionsRequested = new EventEmitter();
-    /** Emitted when the user clicks the in-composer Plan Mode toggle button. */
-    planModeToggle = new EventEmitter();
-    onRealtimeClick() {
-        this.voiceRequested.emit();
-    }
-    onRealtimeOptionsClick() {
-        this.voiceOptionsRequested.emit();
-    }
-    get canSend() {
-        const hasText = this.value.trim().length > 0;
-        const hasAttachments = this.mentionEditor?.hasAttachments() || false;
-        return !this.disabled && (hasText || hasAttachments);
-    }
-    /**
-     * Handle value changes from MentionEditorComponent
-     */
-    onValueChange(newValue) {
-        this.value = newValue;
-        this.valueChange.emit(this.value);
-    }
-    /**
-     * Handle attachment changes from MentionEditorComponent
-     */
-    onAttachmentsChanged(attachments) {
-        this.attachmentsChanged.emit(attachments);
-    }
-    /**
-     * Handle attachment errors from MentionEditorComponent
-     */
-    onAttachmentError(error) {
-        this.attachmentError.emit(error);
-    }
-    /**
-     * Handle attachment click from MentionEditorComponent
-     */
-    onAttachmentClicked(attachment) {
-        this.attachmentClicked.emit(attachment);
-    }
-    /**
-     * Handle Enter key from MentionEditorComponent
-     * Extracts plain text with JSON-encoded mentions for message submission
-     */
-    onEnterPressed(_text) {
-        this.onSendClick();
-    }
-    /**
-     * Handle mention selection from MentionEditorComponent
-     */
-    onMentionSelected(suggestion) {
-        // MentionEditorComponent already inserts the mention chip
-        // This is just for additional tracking/analytics if needed
-    }
-    /**
-     * Send the message
-     * Extracts plain text with JSON-encoded mentions for proper persistence
-     */
-    onSendClick() {
-        if (this.canSend) {
-            // Get plain text with JSON-encoded mentions (preserves configuration info)
-            const textToSend = this.mentionEditor?.getPlainTextWithJsonMentions() || this.value.trim();
-            this.textSubmitted.emit(textToSend);
-            this.value = ''; // Clear input after sending
-            // Clear the editor content
-            if (this.mentionEditor) {
-                this.mentionEditor.clear();
-            }
-            this.valueChange.emit(this.value);
-        }
-    }
-    /**
-     * Handle clicks on the container - focus the mention editor
-     * Only moves cursor to end if clicking outside the contentEditable area
-     */
-    onContainerClick(event) {
-        const target = event.target;
-        // Don't handle clicks on the send button
-        if (target.closest('.send-button-icon')) {
-            return;
-        }
-        const editor = this.mentionEditor?.editorRef?.nativeElement;
-        if (!editor)
-            return;
-        // If clicking directly on the editor or its children, let the browser handle cursor placement
-        if (target === editor || editor.contains(target)) {
-            return;
-        }
-        // Only if clicking on the container (empty space), focus and move cursor to end
-        editor.focus();
-        const selection = window.getSelection();
-        const range = document.createRange();
-        if (selection) {
-            range.selectNodeContents(editor);
-            range.collapse(false); // Collapse to end
-            selection.removeAllRanges();
-            selection.addRange(range);
-        }
-    }
-    /**
-     * Public method to focus the input programmatically
-     */
-    focus() {
-        const editor = this.mentionEditor?.editorRef?.nativeElement;
-        if (editor) {
-            editor.focus();
-        }
-    }
-    /**
-     * Get mention chip data including configuration presets
-     */
-    getMentionChipsData() {
-        return this.mentionEditor?.getMentionChipsData() || [];
-    }
-    /**
-     * Get pending attachments from the editor
-     */
-    getPendingAttachments() {
-        return this.mentionEditor?.getPendingAttachments() || [];
-    }
-    /**
-     * Open file picker programmatically
-     */
-    openFilePicker() {
-        this.mentionEditor?.openFilePicker();
-    }
-    /**
-     * Add an artifact as a pending attachment (called by parent after artifact selection)
-     */
-    AddArtifactAttachment(artifact) {
-        return this.mentionEditor?.AddArtifactAttachment(artifact);
-    }
-    static ɵfac = function MessageInputBoxComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || MessageInputBoxComponent)(); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MessageInputBoxComponent, selectors: [["mj-message-input-box"]], viewQuery: function MessageInputBoxComponent_Query(rf, ctx) { if (rf & 1) {
-            i0.ɵɵviewQuery(_c0, 5);
-        } 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", 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)); });
-            i0.ɵɵelementStart(1, "div", 2)(2, "mj-mention-editor", 3, 0);
-            i0.ɵɵtwoWayListener("ngModelChange", function MessageInputBoxComponent_Template_mj_mention_editor_ngModelChange_2_listener($event) { i0.ɵɵrestoreView(_r1); i0.ɵɵtwoWayBindingSet(ctx.value, $event) || (ctx.value = $event); return i0.ɵɵresetView($event); });
-            i0.ɵɵlistener("valueChange", function MessageInputBoxComponent_Template_mj_mention_editor_valueChange_2_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onValueChange($event)); })("enterPressed", function MessageInputBoxComponent_Template_mj_mention_editor_enterPressed_2_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onEnterPressed($event)); })("mentionSelected", function MessageInputBoxComponent_Template_mj_mention_editor_mentionSelected_2_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onMentionSelected($event)); })("attachmentsChanged", function MessageInputBoxComponent_Template_mj_mention_editor_attachmentsChanged_2_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onAttachmentsChanged($event)); })("attachmentError", function MessageInputBoxComponent_Template_mj_mention_editor_attachmentError_2_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onAttachmentError($event)); })("attachmentClicked", function MessageInputBoxComponent_Template_mj_mention_editor_attachmentClicked_2_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onAttachmentClicked($event)); });
-            i0.ɵɵelementEnd();
-            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);
-            i0.ɵɵelementEnd()()();
-        } if (rf & 2) {
-            i0.ɵɵadvance(2);
-            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.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\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 + 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']
-        }], placeholder: [{
-            type: Input
-        }], disabled: [{
-            type: Input
-        }], value: [{
-            type: Input
-        }], showCharacterCount: [{
-            type: Input
-        }], enableMentions: [{
-            type: Input
-        }], currentUser: [{
-            type: Input
-        }], rows: [{
-            type: Input
-        }], enableAttachments: [{
-            type: Input
-        }], maxAttachments: [{
-            type: Input
-        }], maxAttachmentSizeBytes: [{
-            type: Input
-        }], acceptedFileTypes: [{
-            type: Input
-        }], enableRealtime: [{
-            type: Input
-        }], voiceActive: [{
-            type: Input
-        }], canStartRealtime: [{
-            type: Input
-        }], enablePlanMode: [{
-            type: Input
-        }], planModeActive: [{
-            type: Input
-        }], textSubmitted: [{
-            type: Output
-        }], valueChange: [{
-            type: Output
-        }], attachmentsChanged: [{
-            type: Output
-        }], attachmentError: [{
-            type: Output
-        }], attachmentClicked: [{
-            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 +0,0 @@
-{"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"]}