@memberjunction/ng-conversations 5.43.0 → 5.45.0

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

@@ -1,321 +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", 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.ɵɵelementEnd();
-} if (rf & 2) {
-    const ctx_r2 = i0.ɵɵnextContext(2);
-    i0.ɵɵproperty("disabled", ctx_r2.disabled);
-    i0.ɵɵadvance(2);
-    i0.ɵɵproperty("disabled", true);
-} }
-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.ɵɵ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);
-    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.ɵɵadvance(2);
-    i0.ɵɵproperty("disabled", !ctx_r2.canStartVoice);
-} }
-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.ɵɵelementEnd();
-} if (rf & 2) {
-    const ctx_r2 = i0.ɵɵnextContext();
-    i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r2.enableAttachments ? 1 : -1);
-    i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r2.enableVoice ? 2 : -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. */
-    enableVoice = 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;
-    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();
-    /**
-     * 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();
-    onVoiceClick() {
-        this.voiceRequested.emit();
-    }
-    onVoiceOptionsClick() {
-        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();
-    }
-    /**
-     * 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)
-     */
-    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", 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) {
-            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, 3, 2, "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.enableVoice ? 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}"] });
-}
-(() => { (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"] }]
-    }], 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
-        }], enableVoice: [{
-            type: Input
-        }], voiceActive: [{
-            type: Input
-        }], canStartVoice: [{
-            type: Input
-        }], textSubmitted: [{
-            type: Output
-        }], valueChange: [{
-            type: Output
-        }], attachmentsChanged: [{
-            type: Output
-        }], attachmentError: [{
-            type: Output
-        }], attachmentClicked: [{
-            type: Output
-        }], artifactPickerRequested: [{
-            type: Output
-        }], voiceRequested: [{
-            type: Output
-        }], voiceOptionsRequested: [{
-            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() 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"]}