@memberjunction/ng-conversations 5.40.1 → 5.41.0

package/dist/lib/components/realtime/realtime-agent-picker.component.js

@@ -0,0 +1,556 @@
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, EventEmitter, HostListener, Input, Output, ViewChild, inject, } from '@angular/core';
+import { MJButtonDirective } from '@memberjunction/ng-ui-components';
+import { UUIDsEqual } from '@memberjunction/global';
+import { AIEngineBase } from '@memberjunction/ai-engine-base';
+import { BaseAngularComponent } from '@memberjunction/ng-base-types';
+import { REALTIME_ADVANCED_SESSION_CONTROLS, UserHoldsAuthorization } from '../../services/user-authorization';
+import { BuildRealtimeModelOptions, ConstrainTargetsToPairings, DefaultPairedTargetId, LoadCoAgentPairings, } from '../../services/realtime-pairing';
+import * as i0 from "@angular/core";
+const _c0 = ["searchInput"];
+const _forTrack0 = ($index, $item) => $item.ID;
+function RealtimeAgentPickerComponent_Conditional_5_For_10_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "option", 20);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const coAgent_r5 = ctx.$implicit;
+    i0.ɵɵproperty("value", coAgent_r5.ID);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(coAgent_r5.Name);
+} }
+function RealtimeAgentPickerComponent_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+    const _r2 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 6)(1, "label", 16);
+    i0.ɵɵelement(2, "i", 17);
+    i0.ɵɵelementStart(3, "span");
+    i0.ɵɵtext(4, "Co-agent");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(5, "select", 18, 1);
+    i0.ɵɵlistener("change", function RealtimeAgentPickerComponent_Conditional_5_Template_select_change_5_listener() { i0.ɵɵrestoreView(_r2); const coAgentSelect_r3 = i0.ɵɵreference(6); const ctx_r3 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r3.OnCoAgentChange(coAgentSelect_r3.value)); });
+    i0.ɵɵelementStart(7, "option", 19);
+    i0.ɵɵtext(8, "Auto (recommended)");
+    i0.ɵɵelementEnd();
+    i0.ɵɵrepeaterCreate(9, RealtimeAgentPickerComponent_Conditional_5_For_10_Template, 2, 2, "option", 20, _forTrack0);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r3 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(5);
+    i0.ɵɵproperty("value", ctx_r3.SelectedCoAgentId ?? "");
+    i0.ɵɵadvance(4);
+    i0.ɵɵrepeater(ctx_r3.CoAgents);
+} }
+function RealtimeAgentPickerComponent_Conditional_11_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 11);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r3 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(ctx_r3.IsConstrainedByPairings ? "No paired agents available" : "No matching agents");
+} }
+function RealtimeAgentPickerComponent_Conditional_12_For_1_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 24);
+    i0.ɵɵtext(1, "default");
+    i0.ɵɵelementEnd();
+} }
+function RealtimeAgentPickerComponent_Conditional_12_For_1_Template(rf, ctx) { if (rf & 1) {
+    const _r7 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 22);
+    i0.ɵɵlistener("click", function RealtimeAgentPickerComponent_Conditional_12_For_1_Template_button_click_0_listener() { const agent_r8 = i0.ɵɵrestoreView(_r7).$implicit; const ctx_r3 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r3.Select(agent_r8)); })("dblclick", function RealtimeAgentPickerComponent_Conditional_12_For_1_Template_button_dblclick_0_listener() { const agent_r8 = i0.ɵɵrestoreView(_r7).$implicit; const ctx_r3 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r3.Pick(agent_r8)); });
+    i0.ɵɵelement(1, "i");
+    i0.ɵɵelementStart(2, "span", 23);
+    i0.ɵɵtext(3);
+    i0.ɵɵelementEnd();
+    i0.ɵɵconditionalCreate(4, RealtimeAgentPickerComponent_Conditional_12_For_1_Conditional_4_Template, 2, 0, "span", 24);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const agent_r8 = ctx.$implicit;
+    const ctx_r3 = i0.ɵɵnextContext(2);
+    i0.ɵɵclassProp("mj-voice-picker__item--selected", ctx_r3.IsSelected(agent_r8));
+    i0.ɵɵproperty("title", agent_r8.Description || agent_r8.Name);
+    i0.ɵɵadvance();
+    i0.ɵɵclassMap(ctx_r3.IconClassFor(agent_r8));
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(agent_r8.Name);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r3.IsDefaultChoice(agent_r8) ? 4 : -1);
+} }
+function RealtimeAgentPickerComponent_Conditional_12_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵrepeaterCreate(0, RealtimeAgentPickerComponent_Conditional_12_For_1_Template, 5, 7, "button", 21, _forTrack0);
+} if (rf & 2) {
+    const ctx_r3 = i0.ɵɵnextContext();
+    i0.ɵɵrepeater(ctx_r3.FilteredAgents);
+} }
+function RealtimeAgentPickerComponent_Conditional_13_For_10_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "option", 20);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const model_r11 = ctx.$implicit;
+    i0.ɵɵproperty("value", model_r11.ID);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(model_r11.Name);
+} }
+function RealtimeAgentPickerComponent_Conditional_13_Template(rf, ctx) { if (rf & 1) {
+    const _r9 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 12)(1, "label", 25);
+    i0.ɵɵelement(2, "i", 26);
+    i0.ɵɵelementStart(3, "span");
+    i0.ɵɵtext(4, "Voice model");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(5, "select", 27, 2);
+    i0.ɵɵlistener("change", function RealtimeAgentPickerComponent_Conditional_13_Template_select_change_5_listener() { i0.ɵɵrestoreView(_r9); const modelSelect_r10 = i0.ɵɵreference(6); const ctx_r3 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r3.OnModelChange(modelSelect_r10.value)); });
+    i0.ɵɵelementStart(7, "option", 19);
+    i0.ɵɵtext(8, "Auto (recommended)");
+    i0.ɵɵelementEnd();
+    i0.ɵɵrepeaterCreate(9, RealtimeAgentPickerComponent_Conditional_13_For_10_Template, 2, 2, "option", 20, _forTrack0);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r3 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(5);
+    i0.ɵɵproperty("value", ctx_r3.SelectedModelId ?? "");
+    i0.ɵɵadvance(4);
+    i0.ɵɵrepeater(ctx_r3.Models);
+} }
+/**
+ * Compact anchored popover that lets the user choose WHICH agent a realtime
+ * voice call should front — shown by {@link MessageInputComponent} when the
+ * phone button is clicked on a conversation with **no prior agent
+ * participation** (new / empty conversation), and on demand via the caret
+ * button next to the phone (any conversation), where it doubles as the way
+ * to pick a specific **co-agent** (the Realtime-type agent that voices the
+ * call) and — for authorized users — a specific **voice model**. The plain
+ * phone click on an existing conversation keeps its friction-free "call the
+ * resolved agent immediately" behavior.
+ *
+ * Mostly dumb: the host supplies the agent list (the same cached set the
+ * @mention autocomplete / routing logic uses), the Realtime-type co-agent
+ * candidates (filtered from that same set), and the defaults to preselect;
+ * the picker emits the user's choice. The data it loads itself:
+ * - the compact "Voice model" option list (active Realtime models via a
+ *   narrow RunView) — loaded and rendered ONLY when the current user holds
+ *   the `Realtime: Advanced Session Controls` authorization (pure UX
+ *   disclosure; the server enforces the authorization on the mint), and
+ * - the chosen co-agent's pairing rows (`MJ: AI Agent Co Agents`, Active 'CoAgent'-type rows): a
+ *   co-agent with pairing rows may only front its paired targets, so the
+ *   agent list constrains to those rows (Sequence order) with the IsDefault
+ *   row preselected; a co-agent with zero rows is universal and the list is
+ *   untouched.
+ *
+ * It does NOT persist anything (the host persists the co-agent preference
+ * via `UserInfoEngine`; `mj-conversation-agent-picker` pins
+ * `MJConversationEntity.DefaultAgentID` — different jobs, which is why this
+ * is a separate component).
+ *
+ * Anchors itself bottom-right above the composer — the host's
+ * `.message-input-wrapper` is `position: relative`.
+ */
+export class RealtimeAgentPickerComponent extends BaseAngularComponent {
+    /** Agents the user can call — same cached set the @mention / routing logic uses. */
+    Agents = [];
+    /** The agent the default resolution would pick — preselected and listed first. */
+    DefaultAgentId = null;
+    /**
+     * The ACTIVE Realtime-type co-agent candidates the user can run (host-filtered from
+     * the same cached, run-permission-filtered agent set as {@link Agents}). The co-agent
+     * selector renders only when MORE THAN ONE candidate exists — with zero or one
+     * there's nothing meaningful to choose and the server's resolution chain applies.
+     */
+    CoAgents = [];
+    /**
+     * The user's persisted co-agent preference (host-loaded via `UserInfoEngine`) —
+     * preselected in the co-agent selector when it's still a valid candidate.
+     */
+    DefaultCoAgentId = null;
+    /** Emitted with the chosen agent + optional explicit voice model / co-agent when the user confirms. */
+    AgentPicked = new EventEmitter();
+    /** Emitted when the user dismisses without starting a call. */
+    Cancelled = new EventEmitter();
+    searchInput;
+    SearchText = '';
+    SelectedAgentId = null;
+    /** Active Realtime models the model selector offers (loaded only for authorized users). */
+    Models = [];
+    /** The explicitly chosen voice model id, or `null` for "Auto (recommended)" (the default). */
+    SelectedModelId = null;
+    /** The explicitly chosen co-agent id, or `null` for "Auto (recommended)" (the server's chain). */
+    SelectedCoAgentId = null;
+    /**
+     * Whether the current user holds the `Realtime: Advanced Session Controls`
+     * authorization. Gates the voice-model selector (and any future config-override
+     * controls) — pure disclosure; the server enforces the authorization on the mint.
+     */
+    CanOverrideSessionConfig = false;
+    /** The selected co-agent's pairing rows; empty = universal co-agent (no constraint). */
+    Pairings = [];
+    // Template helper — expose the shared UUID comparator to the view.
+    UUIDsEqual = UUIDsEqual;
+    cdr = inject(ChangeDetectorRef);
+    elementRef = inject(ElementRef);
+    /** Monotonic guard so a stale pairing load can't clobber a newer co-agent choice. */
+    pairingLoadToken = 0;
+    /** Co-agent selector visibility: only when there is a real choice to make. */
+    get ShowCoAgentSelect() {
+        return this.CoAgents.length > 1;
+    }
+    /** True while the agent list is constrained to the selected co-agent's paired targets. */
+    get IsConstrainedByPairings() {
+        return this.Pairings.length > 0;
+    }
+    ngOnInit() {
+        const initial = this.DefaultAgentId && this.findAgent(this.DefaultAgentId)
+            ? this.DefaultAgentId
+            : this.FilteredAgents[0]?.ID ?? null;
+        this.SelectedAgentId = initial;
+        this.CanOverrideSessionConfig = UserHoldsAuthorization(this.ProviderToUse?.CurrentUser, REALTIME_ADVANCED_SESSION_CONTROLS, this.ProviderToUse);
+        if (this.CanOverrideSessionConfig) {
+            void this.loadVoiceModels();
+        }
+        // Preselect the persisted co-agent preference when it's still a valid candidate.
+        if (this.DefaultCoAgentId && this.CoAgents.some(a => UUIDsEqual(a.ID, this.DefaultCoAgentId))) {
+            this.SelectedCoAgentId = this.DefaultCoAgentId;
+            void this.reloadPairings();
+        }
+    }
+    /**
+     * Loads the "Voice model" options: active models whose type is `Realtime`, filtered from
+     * {@link AIEngineBase}'s already-cached `Models` (provider-scoped engine instance, lazy
+     * `Config` — no RunView round-trip). Called ONLY for users who hold the
+     * advanced-session-controls authorization. Tolerant — a failure simply leaves
+     * the selector hidden (the server's automatic selection still applies).
+     */
+    async loadVoiceModels() {
+        try {
+            const engine = AIEngineBase.GetProviderInstance(this.ProviderToUse, AIEngineBase);
+            await engine.Config(false, undefined, this.ProviderToUse);
+            this.Models = BuildRealtimeModelOptions(engine.Models ?? []);
+        }
+        catch (error) {
+            console.error('[RealtimeAgentPicker] Failed to load realtime models:', error);
+            this.Models = [];
+        }
+        this.cdr.markForCheck();
+    }
+    /** Records the voice-model choice (`''` = Auto → `null`). */
+    OnModelChange(value) {
+        this.SelectedModelId = value && value.length > 0 ? value : null;
+        this.cdr.markForCheck();
+    }
+    /** Records the co-agent choice (`''` = Auto → `null`) and refreshes the pairing constraint. */
+    OnCoAgentChange(value) {
+        this.SelectedCoAgentId = value && value.length > 0 ? value : null;
+        void this.reloadPairings();
+    }
+    /**
+     * Loads the selected co-agent's pairing rows and re-applies the target constraint:
+     * with rows present, the agent list narrows to the paired targets (Sequence order)
+     * and the IsDefault row's target is preselected; with zero rows (or Auto co-agent)
+     * the list returns to the unconstrained default. Guarded against stale loads when
+     * the user changes co-agents quickly.
+     */
+    async reloadPairings() {
+        const token = ++this.pairingLoadToken;
+        const coAgentId = this.SelectedCoAgentId;
+        const pairings = coAgentId ? await LoadCoAgentPairings(this.ProviderToUse, coAgentId) : [];
+        if (token !== this.pairingLoadToken) {
+            return; // a newer co-agent choice superseded this load
+        }
+        this.Pairings = pairings;
+        this.ensureSelectionVisible();
+        this.cdr.markForCheck();
+    }
+    /**
+     * Keeps the target selection coherent after the visible list changes: prefers the
+     * pairing default (when constrained), then the host default, then keeps the current
+     * selection when still visible, then the first visible row.
+     */
+    ensureSelectionVisible() {
+        const visible = this.FilteredAgents;
+        if (this.IsConstrainedByPairings) {
+            const pairedDefault = DefaultPairedTargetId(this.Pairings);
+            if (pairedDefault && visible.some(a => UUIDsEqual(a.ID, pairedDefault))) {
+                this.SelectedAgentId = pairedDefault;
+                return;
+            }
+        }
+        if (this.SelectedAgentId && visible.some(a => UUIDsEqual(a.ID, this.SelectedAgentId))) {
+            return; // current selection still valid
+        }
+        if (this.DefaultAgentId && visible.some(a => UUIDsEqual(a.ID, this.DefaultAgentId))) {
+            this.SelectedAgentId = this.DefaultAgentId;
+            return;
+        }
+        this.SelectedAgentId = visible[0]?.ID ?? null;
+    }
+    ngAfterViewInit() {
+        // Microtask so focus lands after the popover renders without
+        // triggering ExpressionChangedAfterItHasBeenChecked.
+        Promise.resolve().then(() => this.searchInput?.nativeElement.focus());
+    }
+    /**
+     * The visible target list: pairing-constrained first (a co-agent WITH pairing rows may
+     * only front its paired targets, kept in pairing Sequence order), then search-filtered.
+     * Unconstrained lists keep the default-first + alphabetical ordering.
+     */
+    get FilteredAgents() {
+        const base = ConstrainTargetsToPairings(this.Agents, this.Pairings);
+        const needle = this.SearchText.trim().toLowerCase();
+        const filtered = base.filter(a => !needle || (a.Name ?? '').toLowerCase().includes(needle));
+        if (this.IsConstrainedByPairings) {
+            return filtered; // pairing Sequence order is the canonical order
+        }
+        return filtered.sort((a, b) => {
+            const aDefault = this.isDefault(a) ? 0 : 1;
+            const bDefault = this.isDefault(b) ? 0 : 1;
+            if (aDefault !== bDefault)
+                return aDefault - bDefault;
+            return (a.Name ?? '').localeCompare(b.Name ?? '');
+        });
+    }
+    get SelectedAgent() {
+        return this.SelectedAgentId ? this.findAgent(this.SelectedAgentId) : null;
+    }
+    IsSelected(agent) {
+        return !!this.SelectedAgentId && UUIDsEqual(agent.ID, this.SelectedAgentId);
+    }
+    /**
+     * Whether `agent` carries the "default" badge: under a pairing constraint that's the
+     * co-agent's IsDefault target; otherwise the host-resolved default agent.
+     */
+    IsDefaultChoice(agent) {
+        if (this.IsConstrainedByPairings) {
+            const pairedDefault = DefaultPairedTargetId(this.Pairings);
+            return !!pairedDefault && UUIDsEqual(agent.ID, pairedDefault);
+        }
+        return this.isDefault(agent);
+    }
+    IconClassFor(agent) {
+        return agent.IconClass?.trim() || 'fa-solid fa-robot';
+    }
+    OnSearchInput(value) {
+        this.SearchText = value;
+        // Keep the selection on a visible row.
+        const visible = this.FilteredAgents;
+        if (!visible.some(a => this.IsSelected(a))) {
+            this.SelectedAgentId = visible[0]?.ID ?? null;
+        }
+        this.cdr.markForCheck();
+    }
+    /** Arrow-key navigation through the filtered list. */
+    MoveSelection(delta) {
+        const visible = this.FilteredAgents;
+        if (visible.length === 0)
+            return;
+        const currentIndex = visible.findIndex(a => this.IsSelected(a));
+        const nextIndex = currentIndex < 0
+            ? 0
+            : Math.min(visible.length - 1, Math.max(0, currentIndex + delta));
+        this.SelectedAgentId = visible[nextIndex].ID;
+        this.cdr.markForCheck();
+    }
+    Select(agent) {
+        this.SelectedAgentId = agent.ID;
+        this.cdr.markForCheck();
+    }
+    /** Confirm a specific agent immediately (double-click shortcut). */
+    Pick(agent) {
+        this.AgentPicked.emit(this.buildPick(agent));
+    }
+    StartCall() {
+        const agent = this.SelectedAgent;
+        if (agent) {
+            this.AgentPicked.emit(this.buildPick(agent));
+        }
+    }
+    Cancel() {
+        this.Cancelled.emit();
+    }
+    /** Dismiss when the user clicks anywhere outside the popover. (The phone
+     *  button that opens it stops propagation, so the opening click never
+     *  reaches this handler.) */
+    OnDocumentClick(event) {
+        if (!this.elementRef.nativeElement.contains(event.target)) {
+            this.Cancelled.emit();
+        }
+    }
+    OnEscape() {
+        this.Cancelled.emit();
+    }
+    /**
+     * Assembles the emitted pick. The model preference is hard-gated on the
+     * authorization here (defense in depth — unauthorized users never see the selector,
+     * so `SelectedModelId` should already be null).
+     */
+    buildPick(agent) {
+        return {
+            Agent: agent,
+            PreferredModelId: this.CanOverrideSessionConfig ? this.SelectedModelId : null,
+            CoAgentId: this.SelectedCoAgentId
+        };
+    }
+    isDefault(agent) {
+        return !!this.DefaultAgentId && UUIDsEqual(agent.ID, this.DefaultAgentId);
+    }
+    findAgent(id) {
+        return this.Agents.find(a => UUIDsEqual(a.ID, id)) ?? null;
+    }
+    static ɵfac = /*@__PURE__*/ (() => { let ɵRealtimeAgentPickerComponent_BaseFactory; return function RealtimeAgentPickerComponent_Factory(__ngFactoryType__) { return (ɵRealtimeAgentPickerComponent_BaseFactory || (ɵRealtimeAgentPickerComponent_BaseFactory = i0.ɵɵgetInheritedFactory(RealtimeAgentPickerComponent)))(__ngFactoryType__ || RealtimeAgentPickerComponent); }; })();
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: RealtimeAgentPickerComponent, selectors: [["mj-realtime-agent-picker"]], viewQuery: function RealtimeAgentPickerComponent_Query(rf, ctx) { if (rf & 1) {
+            i0.ɵɵviewQuery(_c0, 5);
+        } if (rf & 2) {
+            let _t;
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.searchInput = _t.first);
+        } }, hostBindings: function RealtimeAgentPickerComponent_HostBindings(rf, ctx) { if (rf & 1) {
+            i0.ɵɵlistener("click", function RealtimeAgentPickerComponent_click_HostBindingHandler($event) { return ctx.OnDocumentClick($event); }, i0.ɵɵresolveDocument)("keydown.escape", function RealtimeAgentPickerComponent_keydown_escape_HostBindingHandler() { return ctx.OnEscape(); }, i0.ɵɵresolveDocument);
+        } }, inputs: { Agents: "Agents", DefaultAgentId: "DefaultAgentId", CoAgents: "CoAgents", DefaultCoAgentId: "DefaultCoAgentId" }, outputs: { AgentPicked: "AgentPicked", Cancelled: "Cancelled" }, features: [i0.ɵɵInheritDefinitionFeature], decls: 20, vars: 5, consts: [["searchInput", ""], ["coAgentSelect", ""], ["modelSelect", ""], [1, "mj-voice-picker", 3, "click"], [1, "mj-voice-picker__header"], [1, "fa-solid", "fa-phone"], [1, "mj-voice-picker__select-row"], [1, "mj-voice-picker__search"], [1, "fa-solid", "fa-magnifying-glass"], ["type", "text", "placeholder", "Search agents", 3, "input", "keydown.enter", "keydown.arrowdown", "keydown.arrowup", "value"], [1, "mj-voice-picker__list"], [1, "mj-voice-picker__empty"], [1, "mj-voice-picker__select-row", "mj-voice-picker__select-row--model"], [1, "mj-voice-picker__footer"], ["mjButton", "", "variant", "primary", "size", "sm", 3, "click", "disabled"], ["mjButton", "", "variant", "outline", "size", "sm", 3, "click"], ["for", "mjVoiceCoAgentSelect", 1, "mj-voice-picker__select-label"], [1, "fa-solid", "fa-headset"], ["id", "mjVoiceCoAgentSelect", 1, "mj-voice-picker__select", 3, "change", "value"], ["value", ""], [3, "value"], ["type", "button", 1, "mj-voice-picker__item", 3, "mj-voice-picker__item--selected", "title"], ["type", "button", 1, "mj-voice-picker__item", 3, "click", "dblclick", "title"], [1, "mj-voice-picker__item-name"], [1, "mj-voice-picker__default-badge"], ["for", "mjVoiceModelSelect", 1, "mj-voice-picker__select-label"], [1, "fa-solid", "fa-microchip"], ["id", "mjVoiceModelSelect", 1, "mj-voice-picker__select", 3, "change", "value"]], template: function RealtimeAgentPickerComponent_Template(rf, ctx) { if (rf & 1) {
+            const _r1 = i0.ɵɵgetCurrentView();
+            i0.ɵɵelementStart(0, "div", 3);
+            i0.ɵɵlistener("click", function RealtimeAgentPickerComponent_Template_div_click_0_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView($event.stopPropagation()); });
+            i0.ɵɵelementStart(1, "div", 4);
+            i0.ɵɵelement(2, "i", 5);
+            i0.ɵɵelementStart(3, "span");
+            i0.ɵɵtext(4, "Start a voice call with\u2026");
+            i0.ɵɵelementEnd()();
+            i0.ɵɵconditionalCreate(5, RealtimeAgentPickerComponent_Conditional_5_Template, 11, 1, "div", 6);
+            i0.ɵɵelementStart(6, "div", 7);
+            i0.ɵɵelement(7, "i", 8);
+            i0.ɵɵelementStart(8, "input", 9, 0);
+            i0.ɵɵlistener("input", function RealtimeAgentPickerComponent_Template_input_input_8_listener() { i0.ɵɵrestoreView(_r1); const searchInput_r6 = i0.ɵɵreference(9); return i0.ɵɵresetView(ctx.OnSearchInput(searchInput_r6.value)); })("keydown.enter", function RealtimeAgentPickerComponent_Template_input_keydown_enter_8_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.StartCall()); })("keydown.arrowdown", function RealtimeAgentPickerComponent_Template_input_keydown_arrowdown_8_listener($event) { i0.ɵɵrestoreView(_r1); ctx.MoveSelection(1); return i0.ɵɵresetView($event.preventDefault()); })("keydown.arrowup", function RealtimeAgentPickerComponent_Template_input_keydown_arrowup_8_listener($event) { i0.ɵɵrestoreView(_r1); ctx.MoveSelection(-1); return i0.ɵɵresetView($event.preventDefault()); });
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(10, "div", 10);
+            i0.ɵɵconditionalCreate(11, RealtimeAgentPickerComponent_Conditional_11_Template, 2, 1, "div", 11)(12, RealtimeAgentPickerComponent_Conditional_12_Template, 2, 0);
+            i0.ɵɵelementEnd();
+            i0.ɵɵconditionalCreate(13, RealtimeAgentPickerComponent_Conditional_13_Template, 11, 1, "div", 12);
+            i0.ɵɵelementStart(14, "div", 13)(15, "button", 14);
+            i0.ɵɵlistener("click", function RealtimeAgentPickerComponent_Template_button_click_15_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.StartCall()); });
+            i0.ɵɵelement(16, "i", 5);
+            i0.ɵɵtext(17, " Start ");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(18, "button", 15);
+            i0.ɵɵlistener("click", function RealtimeAgentPickerComponent_Template_button_click_18_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.Cancel()); });
+            i0.ɵɵtext(19, "Cancel");
+            i0.ɵɵelementEnd()()();
+        } if (rf & 2) {
+            i0.ɵɵadvance(5);
+            i0.ɵɵconditional(ctx.ShowCoAgentSelect ? 5 : -1);
+            i0.ɵɵadvance(3);
+            i0.ɵɵproperty("value", ctx.SearchText);
+            i0.ɵɵadvance(3);
+            i0.ɵɵconditional(ctx.FilteredAgents.length === 0 ? 11 : 12);
+            i0.ɵɵadvance(2);
+            i0.ɵɵconditional(ctx.CanOverrideSessionConfig && ctx.Models.length > 0 ? 13 : -1);
+            i0.ɵɵadvance(2);
+            i0.ɵɵproperty("disabled", !ctx.SelectedAgent);
+        } }, dependencies: [MJButtonDirective], styles: ["[_nghost-%COMP%] {\n            position: absolute;\n            bottom: calc(100% + 8px);\n            right: 8px;\n            z-index: 60;\n        }\n        .mj-voice-picker[_ngcontent-%COMP%] {\n            width: 300px;\n            display: flex; flex-direction: column;\n            background: var(--mj-bg-surface-elevated);\n            border: 1px solid var(--mj-border-default);\n            border-radius: 8px;\n            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);\n            overflow: hidden;\n        }\n        .mj-voice-picker__header[_ngcontent-%COMP%] {\n            display: flex; align-items: center; gap: 8px;\n            padding: 10px 12px 8px;\n            font-size: 13px; font-weight: 600;\n            color: var(--mj-text-primary);\n        }\n        .mj-voice-picker__header[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] { color: var(--mj-brand-primary); }\n        .mj-voice-picker__search[_ngcontent-%COMP%] {\n            display: flex; align-items: center; gap: 8px;\n            margin: 0 12px 8px;\n            padding: 0 10px;\n            background: var(--mj-bg-surface-sunken);\n            border: 1px solid var(--mj-border-subtle);\n            border-radius: 6px;\n        }\n        .mj-voice-picker__search[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] { font-size: 12px; color: var(--mj-text-muted); }\n        .mj-voice-picker__search[_ngcontent-%COMP%]   input[_ngcontent-%COMP%] {\n            flex: 1; min-width: 0;\n            padding: 7px 0;\n            background: transparent; border: none; outline: none;\n            font-size: 13px; color: var(--mj-text-primary);\n        }\n        .mj-voice-picker__search[_ngcontent-%COMP%]   input[_ngcontent-%COMP%]::placeholder { color: var(--mj-text-disabled); }\n        .mj-voice-picker__search[_ngcontent-%COMP%]:focus-within { border-color: var(--mj-border-focus); }\n        .mj-voice-picker__list[_ngcontent-%COMP%] {\n            max-height: 220px; overflow-y: auto;\n            border-top: 1px solid var(--mj-border-subtle);\n            border-bottom: 1px solid var(--mj-border-subtle);\n            padding: 4px 0;\n        }\n        .mj-voice-picker__item[_ngcontent-%COMP%] {\n            display: flex; align-items: center; gap: 8px; width: 100%;\n            padding: 7px 12px;\n            background: transparent; border: none; cursor: pointer;\n            color: var(--mj-text-primary); font-size: 13px; text-align: left;\n        }\n        .mj-voice-picker__item[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] { width: 16px; text-align: center; color: var(--mj-text-secondary); }\n        .mj-voice-picker__item[_ngcontent-%COMP%]:hover { background: var(--mj-bg-surface-hover); }\n        .mj-voice-picker__item--selected[_ngcontent-%COMP%] {\n            background: color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n        }\n        .mj-voice-picker__item--selected[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] { color: var(--mj-brand-primary); }\n        .mj-voice-picker__item-name[_ngcontent-%COMP%] {\n            flex: 1; min-width: 0;\n            overflow: hidden; text-overflow: ellipsis; white-space: nowrap;\n        }\n        .mj-voice-picker__default-badge[_ngcontent-%COMP%] {\n            flex-shrink: 0;\n            padding: 1px 6px;\n            border-radius: 999px;\n            font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em;\n            color: var(--mj-brand-primary);\n            background: color-mix(in srgb, var(--mj-brand-primary) 12%, transparent);\n        }\n        .mj-voice-picker__empty[_ngcontent-%COMP%] {\n            padding: 12px; font-size: 12px; color: var(--mj-text-muted); text-align: center;\n        }\n        .mj-voice-picker__select-row[_ngcontent-%COMP%] {\n            display: flex; align-items: center; gap: 8px;\n            padding: 0 12px 8px;\n        }\n        .mj-voice-picker__select-row--model[_ngcontent-%COMP%] {\n            padding: 8px 12px 0;\n        }\n        .mj-voice-picker__select-label[_ngcontent-%COMP%] {\n            display: flex; align-items: center; gap: 6px;\n            flex-shrink: 0;\n            font-size: 12px; color: var(--mj-text-secondary);\n        }\n        .mj-voice-picker__select-label[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] { font-size: 11px; color: var(--mj-text-muted); }\n        .mj-voice-picker__select[_ngcontent-%COMP%] {\n            flex: 1; min-width: 0;\n            padding: 5px 8px;\n            font-size: 12px;\n            color: var(--mj-text-primary);\n            background: var(--mj-bg-surface-sunken);\n            border: 1px solid var(--mj-border-subtle);\n            border-radius: 6px;\n            outline: none;\n        }\n        .mj-voice-picker__select[_ngcontent-%COMP%]:focus { border-color: var(--mj-border-focus); }\n        .mj-voice-picker__footer[_ngcontent-%COMP%] {\n            display: flex; align-items: center; gap: 8px;\n            padding: 10px 12px;\n        }"], changeDetection: 0 });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(RealtimeAgentPickerComponent, [{
+        type: Component,
+        args: [{ standalone: true, selector: 'mj-realtime-agent-picker', imports: [MJButtonDirective], changeDetection: ChangeDetectionStrategy.OnPush, template: `
+        <div class="mj-voice-picker" (click)="$event.stopPropagation()">
+            <div class="mj-voice-picker__header">
+                <i class="fa-solid fa-phone"></i>
+                <span>Start a voice call with…</span>
+            </div>
+            @if (ShowCoAgentSelect) {
+                <div class="mj-voice-picker__select-row">
+                    <label class="mj-voice-picker__select-label" for="mjVoiceCoAgentSelect">
+                        <i class="fa-solid fa-headset"></i>
+                        <span>Co-agent</span>
+                    </label>
+                    <select
+                        #coAgentSelect
+                        id="mjVoiceCoAgentSelect"
+                        class="mj-voice-picker__select"
+                        [value]="SelectedCoAgentId ?? ''"
+                        (change)="OnCoAgentChange(coAgentSelect.value)">
+                        <option value="">Auto (recommended)</option>
+                        @for (coAgent of CoAgents; track coAgent.ID) {
+                            <option [value]="coAgent.ID">{{ coAgent.Name }}</option>
+                        }
+                    </select>
+                </div>
+            }
+            <div class="mj-voice-picker__search">
+                <i class="fa-solid fa-magnifying-glass"></i>
+                <input
+                    #searchInput
+                    type="text"
+                    placeholder="Search agents"
+                    [value]="SearchText"
+                    (input)="OnSearchInput(searchInput.value)"
+                    (keydown.enter)="StartCall()"
+                    (keydown.arrowdown)="MoveSelection(1); $event.preventDefault()"
+                    (keydown.arrowup)="MoveSelection(-1); $event.preventDefault()" />
+            </div>
+            <div class="mj-voice-picker__list">
+                @if (FilteredAgents.length === 0) {
+                    <div class="mj-voice-picker__empty">{{ IsConstrainedByPairings ? 'No paired agents available' : 'No matching agents' }}</div>
+                } @else {
+                    @for (agent of FilteredAgents; track agent.ID) {
+                        <button
+                            type="button"
+                            class="mj-voice-picker__item"
+                            [class.mj-voice-picker__item--selected]="IsSelected(agent)"
+                            [title]="agent.Description || agent.Name"
+                            (click)="Select(agent)"
+                            (dblclick)="Pick(agent)">
+                            <i [class]="IconClassFor(agent)"></i>
+                            <span class="mj-voice-picker__item-name">{{ agent.Name }}</span>
+                            @if (IsDefaultChoice(agent)) {
+                                <span class="mj-voice-picker__default-badge">default</span>
+                            }
+                        </button>
+                    }
+                }
+            </div>
+            @if (CanOverrideSessionConfig && Models.length > 0) {
+                <div class="mj-voice-picker__select-row mj-voice-picker__select-row--model">
+                    <label class="mj-voice-picker__select-label" for="mjVoiceModelSelect">
+                        <i class="fa-solid fa-microchip"></i>
+                        <span>Voice model</span>
+                    </label>
+                    <select
+                        #modelSelect
+                        id="mjVoiceModelSelect"
+                        class="mj-voice-picker__select"
+                        [value]="SelectedModelId ?? ''"
+                        (change)="OnModelChange(modelSelect.value)">
+                        <option value="">Auto (recommended)</option>
+                        @for (model of Models; track model.ID) {
+                            <option [value]="model.ID">{{ model.Name }}</option>
+                        }
+                    </select>
+                </div>
+            }
+            <div class="mj-voice-picker__footer">
+                <button mjButton variant="primary" size="sm" [disabled]="!SelectedAgent" (click)="StartCall()">
+                    <i class="fa-solid fa-phone"></i> Start
+                </button>
+                <button mjButton variant="outline" size="sm" (click)="Cancel()">Cancel</button>
+            </div>
+        </div>
+    `, styles: ["\n        :host {\n            position: absolute;\n            bottom: calc(100% + 8px);\n            right: 8px;\n            z-index: 60;\n        }\n        .mj-voice-picker {\n            width: 300px;\n            display: flex; flex-direction: column;\n            background: var(--mj-bg-surface-elevated);\n            border: 1px solid var(--mj-border-default);\n            border-radius: 8px;\n            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);\n            overflow: hidden;\n        }\n        .mj-voice-picker__header {\n            display: flex; align-items: center; gap: 8px;\n            padding: 10px 12px 8px;\n            font-size: 13px; font-weight: 600;\n            color: var(--mj-text-primary);\n        }\n        .mj-voice-picker__header i { color: var(--mj-brand-primary); }\n        .mj-voice-picker__search {\n            display: flex; align-items: center; gap: 8px;\n            margin: 0 12px 8px;\n            padding: 0 10px;\n            background: var(--mj-bg-surface-sunken);\n            border: 1px solid var(--mj-border-subtle);\n            border-radius: 6px;\n        }\n        .mj-voice-picker__search i { font-size: 12px; color: var(--mj-text-muted); }\n        .mj-voice-picker__search input {\n            flex: 1; min-width: 0;\n            padding: 7px 0;\n            background: transparent; border: none; outline: none;\n            font-size: 13px; color: var(--mj-text-primary);\n        }\n        .mj-voice-picker__search input::placeholder { color: var(--mj-text-disabled); }\n        .mj-voice-picker__search:focus-within { border-color: var(--mj-border-focus); }\n        .mj-voice-picker__list {\n            max-height: 220px; overflow-y: auto;\n            border-top: 1px solid var(--mj-border-subtle);\n            border-bottom: 1px solid var(--mj-border-subtle);\n            padding: 4px 0;\n        }\n        .mj-voice-picker__item {\n            display: flex; align-items: center; gap: 8px; width: 100%;\n            padding: 7px 12px;\n            background: transparent; border: none; cursor: pointer;\n            color: var(--mj-text-primary); font-size: 13px; text-align: left;\n        }\n        .mj-voice-picker__item i { width: 16px; text-align: center; color: var(--mj-text-secondary); }\n        .mj-voice-picker__item:hover { background: var(--mj-bg-surface-hover); }\n        .mj-voice-picker__item--selected {\n            background: color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n        }\n        .mj-voice-picker__item--selected i { color: var(--mj-brand-primary); }\n        .mj-voice-picker__item-name {\n            flex: 1; min-width: 0;\n            overflow: hidden; text-overflow: ellipsis; white-space: nowrap;\n        }\n        .mj-voice-picker__default-badge {\n            flex-shrink: 0;\n            padding: 1px 6px;\n            border-radius: 999px;\n            font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em;\n            color: var(--mj-brand-primary);\n            background: color-mix(in srgb, var(--mj-brand-primary) 12%, transparent);\n        }\n        .mj-voice-picker__empty {\n            padding: 12px; font-size: 12px; color: var(--mj-text-muted); text-align: center;\n        }\n        .mj-voice-picker__select-row {\n            display: flex; align-items: center; gap: 8px;\n            padding: 0 12px 8px;\n        }\n        .mj-voice-picker__select-row--model {\n            padding: 8px 12px 0;\n        }\n        .mj-voice-picker__select-label {\n            display: flex; align-items: center; gap: 6px;\n            flex-shrink: 0;\n            font-size: 12px; color: var(--mj-text-secondary);\n        }\n        .mj-voice-picker__select-label i { font-size: 11px; color: var(--mj-text-muted); }\n        .mj-voice-picker__select {\n            flex: 1; min-width: 0;\n            padding: 5px 8px;\n            font-size: 12px;\n            color: var(--mj-text-primary);\n            background: var(--mj-bg-surface-sunken);\n            border: 1px solid var(--mj-border-subtle);\n            border-radius: 6px;\n            outline: none;\n        }\n        .mj-voice-picker__select:focus { border-color: var(--mj-border-focus); }\n        .mj-voice-picker__footer {\n            display: flex; align-items: center; gap: 8px;\n            padding: 10px 12px;\n        }\n    "] }]
+    }], null, { Agents: [{
+            type: Input
+        }], DefaultAgentId: [{
+            type: Input
+        }], CoAgents: [{
+            type: Input
+        }], DefaultCoAgentId: [{
+            type: Input
+        }], AgentPicked: [{
+            type: Output
+        }], Cancelled: [{
+            type: Output
+        }], searchInput: [{
+            type: ViewChild,
+            args: ['searchInput']
+        }], OnDocumentClick: [{
+            type: HostListener,
+            args: ['document:click', ['$event']]
+        }], OnEscape: [{
+            type: HostListener,
+            args: ['document:keydown.escape']
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(RealtimeAgentPickerComponent, { className: "RealtimeAgentPickerComponent", filePath: "src/lib/components/realtime/realtime-agent-picker.component.ts", lineNumber: 272 }); })();
+//# sourceMappingURL=realtime-agent-picker.component.js.map