@memberjunction/ng-conversations 6.2.0-edge.3 → 6.2.0-edge.5

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

@@ -1,5 +1,6 @@
 import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, EventEmitter, HostListener, Input, Output, ViewChild, inject, } from '@angular/core';
-import { MJButtonDirective } from '@memberjunction/ng-ui-components';
+import { FormsModule } from '@angular/forms';
+import { MJButtonDirective, MJDropdownComponent } from '@memberjunction/ng-ui-components';
 import { UUIDsEqual } from '@memberjunction/global';
 import { AIEngineBase } from '@memberjunction/ai-engine-base';
 import { UserInfoEngine } from '@memberjunction/core-entities';
@@ -8,6 +9,7 @@ import { REALTIME_ADVANCED_SESSION_CONTROLS, UserHoldsAuthorization } from '../.
 import { BuildRealtimeModelOptions, ConstrainTargetsToPairings, DefaultPairedTargetId, LoadCoAgentPairings, } from '../../services/realtime-pairing';
 import { GraphQLLiveKitClient } from '@memberjunction/graphql-dataprovider';
 import * as i0 from "@angular/core";
+import * as i1 from "@angular/forms";
 const _c0 = ["searchInput"];
 const _forTrack0 = ($index, $item) => $item.ID;
 function RealtimeAgentPickerComponent_Conditional_5_For_10_Template(rf, ctx) { if (rf & 1) {
@@ -93,36 +95,75 @@ function RealtimeAgentPickerComponent_Conditional_13_For_10_Template(rf, ctx) {
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate(model_r11.Name);
 } }
-function RealtimeAgentPickerComponent_Conditional_13_Conditional_11_For_10_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "option", 27);
-    i0.ɵɵtext(1);
+function RealtimeAgentPickerComponent_Conditional_13_Conditional_11_ng_template_6_Conditional_0_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    const _r13 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "img", 46);
+    i0.ɵɵlistener("error", function RealtimeAgentPickerComponent_Conditional_13_Conditional_11_ng_template_6_Conditional_0_Conditional_1_Template_img_error_0_listener() { const image_r14 = i0.ɵɵrestoreView(_r13); const ctx_r3 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r3.OnPreviewImageError(image_r14)); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const v_r14 = ctx.$implicit;
-    i0.ɵɵproperty("value", v_r14.ID);
+    i0.ɵɵproperty("src", ctx, i0.ɵɵsanitizeUrl);
+} }
+function RealtimeAgentPickerComponent_Conditional_13_Conditional_11_ng_template_6_Conditional_0_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 45);
+    i0.ɵɵelement(1, "i", 47);
+    i0.ɵɵelementStart(2, "span", 48);
+    i0.ɵɵtext(3, "Comes with an avatar");
+    i0.ɵɵelementEnd()();
+} }
+function RealtimeAgentPickerComponent_Conditional_13_Conditional_11_ng_template_6_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 42);
+    i0.ɵɵconditionalCreate(1, RealtimeAgentPickerComponent_Conditional_13_Conditional_11_ng_template_6_Conditional_0_Conditional_1_Template, 1, 1, "img", 43);
+    i0.ɵɵelementStart(2, "span", 44);
+    i0.ɵɵtext(3);
+    i0.ɵɵelementEnd();
+    i0.ɵɵconditionalCreate(4, RealtimeAgentPickerComponent_Conditional_13_Conditional_11_ng_template_6_Conditional_0_Conditional_4_Template, 4, 0, "span", 45);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    let tmp_9_0;
+    const voice_r15 = ctx;
+    const ctx_r3 = i0.ɵɵnextContext(4);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional((tmp_9_0 = ctx_r3.PreviewImageFor(voice_r15)) ? 1 : -1, tmp_9_0);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(voice_r15.Name);
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(v_r14.Name);
+    i0.ɵɵconditional(voice_r15.AvatarID ? 4 : -1);
+} }
+function RealtimeAgentPickerComponent_Conditional_13_Conditional_11_ng_template_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵconditionalCreate(0, RealtimeAgentPickerComponent_Conditional_13_Conditional_11_ng_template_6_Conditional_0_Template, 5, 3, "span", 42);
+} if (rf & 2) {
+    let tmp_7_0;
+    const item_r16 = ctx.$implicit;
+    const ctx_r3 = i0.ɵɵnextContext(3);
+    i0.ɵɵconditional((tmp_7_0 = ctx_r3.VoiceOptionFor(item_r16)) ? 0 : -1, tmp_7_0);
+} }
+function RealtimeAgentPickerComponent_Conditional_13_Conditional_11_Conditional_9_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 41);
+    i0.ɵɵelement(1, "i", 47);
+    i0.ɵɵelementStart(2, "span");
+    i0.ɵɵtext(3, "Comes with an avatar");
+    i0.ɵɵelementEnd()();
 } }
 function RealtimeAgentPickerComponent_Conditional_13_Conditional_11_Template(rf, ctx) { if (rf & 1) {
     const _r12 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 32)(1, "label", 36);
-    i0.ɵɵelement(2, "i", 37);
+    i0.ɵɵelementStart(0, "div", 36)(1, "span", 37);
+    i0.ɵɵelement(2, "i", 38);
     i0.ɵɵelementStart(3, "span");
     i0.ɵɵtext(4, "Voice");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(5, "select", 38, 3);
-    i0.ɵɵlistener("change", function RealtimeAgentPickerComponent_Conditional_13_Conditional_11_Template_select_change_5_listener() { i0.ɵɵrestoreView(_r12); const voiceSelect_r13 = i0.ɵɵreference(6); const ctx_r3 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r3.OnVoiceChange(voiceSelect_r13.value)); });
-    i0.ɵɵelementStart(7, "option", 26);
-    i0.ɵɵtext(8, "Default");
+    i0.ɵɵelementStart(5, "mj-dropdown", 39);
+    i0.ɵɵlistener("ValueChange", function RealtimeAgentPickerComponent_Conditional_13_Conditional_11_Template_mj_dropdown_ValueChange_5_listener($event) { i0.ɵɵrestoreView(_r12); const ctx_r3 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r3.OnVoiceChange($event)); });
+    i0.ɵɵtemplate(6, RealtimeAgentPickerComponent_Conditional_13_Conditional_11_ng_template_6_Template, 1, 1, "ng-template", null, 3, i0.ɵɵtemplateRefExtractor);
     i0.ɵɵelementEnd();
-    i0.ɵɵrepeaterCreate(9, RealtimeAgentPickerComponent_Conditional_13_Conditional_11_For_10_Template, 2, 2, "option", 27, _forTrack0);
+    i0.ɵɵelementStart(8, "div", 40);
+    i0.ɵɵconditionalCreate(9, RealtimeAgentPickerComponent_Conditional_13_Conditional_11_Conditional_9_Template, 4, 0, "span", 41);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r3 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance(5);
-    i0.ɵɵproperty("value", ctx_r3.SelectedVoiceId ?? "");
+    i0.ɵɵproperty("Data", ctx_r3.SelectedModelVoices)("ngModel", ctx_r3.SelectedVoice);
     i0.ɵɵadvance(4);
-    i0.ɵɵrepeater(ctx_r3.SelectedModelVoices);
+    i0.ɵɵconditional(ctx_r3.SelectedVoiceHasAvatar ? 9 : -1);
 } }
 function RealtimeAgentPickerComponent_Conditional_13_Template(rf, ctx) { if (rf & 1) {
     const _r9 = i0.ɵɵgetCurrentView();
@@ -138,7 +179,7 @@ function RealtimeAgentPickerComponent_Conditional_13_Template(rf, ctx) { if (rf
     i0.ɵɵelementEnd();
     i0.ɵɵrepeaterCreate(9, RealtimeAgentPickerComponent_Conditional_13_For_10_Template, 2, 2, "option", 27, _forTrack0);
     i0.ɵɵelementEnd()();
-    i0.ɵɵconditionalCreate(11, RealtimeAgentPickerComponent_Conditional_13_Conditional_11_Template, 11, 1, "div", 32);
+    i0.ɵɵconditionalCreate(11, RealtimeAgentPickerComponent_Conditional_13_Conditional_11_Template, 10, 3, "div", 36);
 } if (rf & 2) {
     const ctx_r3 = i0.ɵɵnextContext();
     i0.ɵɵadvance(5);
@@ -166,9 +207,12 @@ const RECORDING_CONSENT_KEY = 'mj.realtimeVoice.recordingConsent.v1';
  * 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
+ *   narrow RunView) and each model's voices — 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). The voice list marks the voices whose persona comes with an
+ *   avatar (a camera icon) and shows a persona's preview image when it has
+ *   one; picking such a voice also picks its avatar, 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
@@ -222,12 +266,25 @@ export class RealtimeAgentPickerComponent extends BaseAngularComponent {
     SelectedModelId = null;
     /** Active Realtime models + their voices (for the voice selector); loaded only for authorized users. */
     VoiceModels = [];
+    /**
+     * The explicitly chosen voice option (one of {@link SelectedModelVoices}: a persona, so two personas sharing a voice
+     * id stay apart), or `null` for the configured/default voice.
+     */
+    SelectedVoice = null;
     /** The explicitly chosen voice id, or `null` for the configured/default voice. */
-    SelectedVoiceId = null;
+    get SelectedVoiceId() {
+        return this.SelectedVoice?.ID ?? null;
+    }
+    /** Whether the chosen voice comes with an avatar: the hint under the voice list says so. */
+    get SelectedVoiceHasAvatar() {
+        return !!this.SelectedVoice?.AvatarID?.trim();
+    }
     /** Voices for the currently-selected model (empty when no model picked or it declares none). */
     get SelectedModelVoices() {
         return this.VoiceModels.find((m) => UUIDsEqual(m.ModelID, this.SelectedModelId))?.Voices ?? [];
     }
+    /** Preview images that failed to load; their voices show no image rather than a broken one. */
+    failedPreviewImages = new Set();
     /** The explicitly chosen co-agent id, or `null` for "Auto (recommended)" (the server's chain). */
     SelectedCoAgentId = null;
     /**
@@ -343,15 +400,35 @@ export class RealtimeAgentPickerComponent extends BaseAngularComponent {
         }
         this.cdr.markForCheck();
     }
-    /** Records the voice-model choice (`''` = Auto → `null`); clears the voice so it can't outlive a switch. */
+    /** Records the voice-model choice (`''` = Auto → `null`); clears the voice (and its avatar) so it can't outlive a switch. */
     OnModelChange(value) {
         this.SelectedModelId = value && value.length > 0 ? value : null;
-        this.SelectedVoiceId = null;
+        this.SelectedVoice = null;
         this.cdr.markForCheck();
     }
-    /** Records the voice choice (`''` = default → `null`). */
+    /**
+     * Records the voice choice from the voice list: one of {@link SelectedModelVoices}, or `null` for "Default". The
+     * voice's avatar, when it has one, goes with it.
+     */
     OnVoiceChange(value) {
-        this.SelectedVoiceId = value && value.length > 0 ? value : null;
+        this.SelectedVoice = this.VoiceOptionFor(value) ?? null;
+        this.cdr.markForCheck();
+    }
+    /**
+     * The voice an item of the voice list is. The list's items are {@link SelectedModelVoices}' own objects, matched by
+     * identity: an option is a persona, and two personas can share a voice id.
+     */
+    VoiceOptionFor(item) {
+        return this.SelectedModelVoices.find((voice) => voice === item);
+    }
+    /** The voice's persona preview image to show, or `null` when it has none or the image failed to load. */
+    PreviewImageFor(voice) {
+        const url = voice.PreviewImageURL?.trim();
+        return url && !this.failedPreviewImages.has(url) ? url : null;
+    }
+    /** Hides a preview image that failed to load. */
+    OnPreviewImageError(url) {
+        this.failedPreviewImages.add(url);
         this.cdr.markForCheck();
     }
     /** Records the co-agent choice (`''` = Auto → `null`) and refreshes the pairing constraint. */
@@ -485,9 +562,11 @@ export class RealtimeAgentPickerComponent extends BaseAngularComponent {
     }
     /** 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.) */
+     *  reaches this handler.) The voice list opens in its own overlay outside
+     *  this element; a click on it, or on the backdrop that closes it, only
+     *  closes the list. */
     OnDocumentClick(event) {
-        if (!this.elementRef.nativeElement.contains(event.target)) {
+        if (!this.elementRef.nativeElement.contains(event.target) && !this.isInDropdownOverlay(event.target)) {
             this.Cancelled.emit();
         }
     }
@@ -495,19 +574,25 @@ export class RealtimeAgentPickerComponent extends BaseAngularComponent {
         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).
+     * Assembles the emitted pick. The model, voice and avatar preferences are hard-gated
+     * on the authorization here (defense in depth — unauthorized users never see the
+     * selectors, so they should already be null).
      */
     buildPick(agent) {
+        const voice = this.CanOverrideSessionConfig ? this.SelectedVoice : null;
         return {
             Agent: agent,
             PreferredModelId: this.CanOverrideSessionConfig ? this.SelectedModelId : null,
-            PreferredVoice: this.CanOverrideSessionConfig ? this.SelectedVoiceId : null,
+            PreferredVoice: voice?.ID ?? null,
+            PreferredAvatarId: voice?.AvatarID?.trim() || null,
             CoAgentId: this.SelectedCoAgentId,
             RecordingConsent: this.RecordingConsent
         };
     }
+    /** Whether a click landed in a dropdown's overlay (its option panel or the backdrop that closes it). */
+    isInDropdownOverlay(target) {
+        return target instanceof Element && target.closest('.mj-dropdown-panel, .mj-dropdown-backdrop') != null;
+    }
     isDefault(agent) {
         return !!this.DefaultAgentId && UUIDsEqual(agent.ID, this.DefaultAgentId);
     }
@@ -522,7 +607,7 @@ export class RealtimeAgentPickerComponent extends BaseAngularComponent {
             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: { CurrentUser: "CurrentUser", Agents: "Agents", DefaultAgentId: "DefaultAgentId", CoAgents: "CoAgents", DefaultCoAgentId: "DefaultCoAgentId" }, outputs: { AgentPicked: "AgentPicked", Cancelled: "Cancelled" }, features: [i0.ɵɵInheritDefinitionFeature], decls: 30, vars: 6, consts: [["searchInput", ""], ["coAgentSelect", ""], ["modelSelect", ""], ["voiceSelect", ""], [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__record-row"], [1, "mj-voice-picker__record-label"], [1, "fa-solid", "fa-microphone"], [1, "mj-voice-picker__record-copy"], [1, "mj-voice-picker__switch"], ["type", "checkbox", "aria-label", "Record this call (audio stored securely)", 3, "change", "checked"], [1, "mj-voice-picker__switch-track"], [1, "mj-voice-picker__footer"], ["mjButton", "", "variant", "primary", "size", "sm", 3, "click", "disabled"], ["mjButton", "", "variant", "outline", "size", "sm", 3, "click"], ["for", "mjRealtimeCoAgentSelect", 1, "mj-voice-picker__select-label"], [1, "fa-solid", "fa-headset"], ["id", "mjRealtimeCoAgentSelect", 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"], [1, "mj-voice-picker__select-row", "mj-voice-picker__select-row--model"], ["for", "mjRealtimeModelSelect", 1, "mj-voice-picker__select-label"], [1, "fa-solid", "fa-microchip"], ["id", "mjRealtimeModelSelect", 1, "mj-voice-picker__select", 3, "change", "value"], ["for", "mjRealtimeVoiceSelect", 1, "mj-voice-picker__select-label"], [1, "fa-solid", "fa-waveform-lines"], ["id", "mjRealtimeVoiceSelect", 1, "mj-voice-picker__select", 3, "change", "value"]], template: function RealtimeAgentPickerComponent_Template(rf, ctx) { if (rf & 1) {
+        } }, inputs: { CurrentUser: "CurrentUser", Agents: "Agents", DefaultAgentId: "DefaultAgentId", CoAgents: "CoAgents", DefaultCoAgentId: "DefaultCoAgentId" }, outputs: { AgentPicked: "AgentPicked", Cancelled: "Cancelled" }, features: [i0.ɵɵInheritDefinitionFeature], decls: 30, vars: 6, consts: [["searchInput", ""], ["coAgentSelect", ""], ["modelSelect", ""], ["mjDropdownItem", ""], [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__record-row"], [1, "mj-voice-picker__record-label"], [1, "fa-solid", "fa-microphone"], [1, "mj-voice-picker__record-copy"], [1, "mj-voice-picker__switch"], ["type", "checkbox", "aria-label", "Record this call (audio stored securely)", 3, "change", "checked"], [1, "mj-voice-picker__switch-track"], [1, "mj-voice-picker__footer"], ["mjButton", "", "variant", "primary", "size", "sm", 3, "click", "disabled"], ["mjButton", "", "variant", "outline", "size", "sm", 3, "click"], ["for", "mjRealtimeCoAgentSelect", 1, "mj-voice-picker__select-label"], [1, "fa-solid", "fa-headset"], ["id", "mjRealtimeCoAgentSelect", 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"], [1, "mj-voice-picker__select-row", "mj-voice-picker__select-row--model"], ["for", "mjRealtimeModelSelect", 1, "mj-voice-picker__select-label"], [1, "fa-solid", "fa-microchip"], ["id", "mjRealtimeModelSelect", 1, "mj-voice-picker__select", 3, "change", "value"], [1, "mj-voice-picker__select-row", "mj-voice-picker__select-row--model", "mj-voice-picker__voice-row"], ["id", "mjRealtimeVoiceLabel", 1, "mj-voice-picker__select-label"], [1, "fa-solid", "fa-wave-square"], ["InputId", "mjRealtimeVoiceSelect", "AriaLabelledBy", "mjRealtimeVoiceLabel", "AriaDescribedBy", "mjRealtimeVoiceHint", "TextField", "Name", "DefaultItem", "Default", 1, "mj-voice-picker__voice-dropdown", 3, "ValueChange", "Data", "ngModel"], ["id", "mjRealtimeVoiceHint", "aria-live", "polite", 1, "mj-voice-picker__voice-hint"], [1, "mj-voice-picker__voice-hint-line"], [1, "mj-voice-picker__voice"], ["alt", "", 1, "mj-voice-picker__voice-image", 3, "src"], [1, "mj-voice-picker__voice-name"], ["title", "Comes with an avatar", 1, "mj-voice-picker__voice-avatar"], ["alt", "", 1, "mj-voice-picker__voice-image", 3, "error", "src"], ["aria-hidden", "true", 1, "fa-solid", "fa-video"], [1, "mj-voice-picker__sr-only"]], template: function RealtimeAgentPickerComponent_Template(rf, ctx) { if (rf & 1) {
             const _r1 = i0.ɵɵgetCurrentView();
             i0.ɵɵelementStart(0, "div", 4);
             i0.ɵɵlistener("click", function RealtimeAgentPickerComponent_Template_div_click_0_listener($event) { return $event.stopPropagation(); });
@@ -575,11 +660,11 @@ export class RealtimeAgentPickerComponent extends BaseAngularComponent {
             i0.ɵɵproperty("checked", ctx.RecordingConsent);
             i0.ɵɵadvance(3);
             i0.ɵɵproperty("disabled", !ctx.SelectedAgent);
-        } }, dependencies: [MJButtonDirective], styles: ["[_nghost-%COMP%] {\n            \n\n\n\n\n            display: block;\n            max-height: min(440px, calc(100vh - 24px));\n        }\n        .mj-voice-picker[_ngcontent-%COMP%] {\n            width: 300px;\n            max-width: calc(100vw - 24px);\n            display: flex; flex-direction: column;\n            \n\n            max-height: min(440px, calc(100vh - 120px));\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            \n\n\n\n            flex: 1 1 auto;\n            min-height: 0;\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        \n        .mj-voice-picker__header[_ngcontent-%COMP%], \n   .mj-voice-picker__search[_ngcontent-%COMP%], \n   .mj-voice-picker__select-row[_ngcontent-%COMP%], \n   .mj-voice-picker__record-row[_ngcontent-%COMP%], \n   .mj-voice-picker__footer[_ngcontent-%COMP%] { flex-shrink: 0; }\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__record-row[_ngcontent-%COMP%] {\n            display: flex; align-items: center; justify-content: space-between; gap: 10px;\n            margin: 10px 12px 2px;\n            padding: 10px 0 2px;\n            border-top: 1px solid var(--mj-border-subtle);\n        }\n        .mj-voice-picker__record-label[_ngcontent-%COMP%] {\n            display: flex; align-items: center; gap: 8px;\n            font-size: 12px; color: var(--mj-text-secondary);\n        }\n        .mj-voice-picker__record-label[_ngcontent-%COMP%]    > i[_ngcontent-%COMP%] { font-size: 12px; color: var(--mj-text-muted); }\n        .mj-voice-picker__record-copy[_ngcontent-%COMP%] { display: flex; flex-direction: column; line-height: 1.3; }\n        .mj-voice-picker__record-copy[_ngcontent-%COMP%]   small[_ngcontent-%COMP%] { font-size: 10px; color: var(--mj-text-muted); }\n        .mj-voice-picker__switch[_ngcontent-%COMP%] { position: relative; flex-shrink: 0; display: inline-flex; cursor: pointer; }\n        .mj-voice-picker__switch[_ngcontent-%COMP%]   input[_ngcontent-%COMP%] {\n            position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer;\n        }\n        .mj-voice-picker__switch-track[_ngcontent-%COMP%] {\n            position: relative; width: 34px; height: 18px; border-radius: 999px;\n            background: var(--mj-border-strong); transition: background 150ms ease;\n        }\n        .mj-voice-picker__switch-track[_ngcontent-%COMP%]::after {\n            content: ''; position: absolute; top: 2px; left: 2px;\n            width: 14px; height: 14px; border-radius: 50%;\n            background: var(--mj-bg-surface); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);\n            transition: transform 150ms ease;\n        }\n        .mj-voice-picker__switch[_ngcontent-%COMP%]   input[_ngcontent-%COMP%]:checked    + .mj-voice-picker__switch-track[_ngcontent-%COMP%] { background: var(--mj-brand-primary); }\n        .mj-voice-picker__switch[_ngcontent-%COMP%]   input[_ngcontent-%COMP%]:checked    + .mj-voice-picker__switch-track[_ngcontent-%COMP%]::after { transform: translateX(16px); }\n        .mj-voice-picker__switch[_ngcontent-%COMP%]   input[_ngcontent-%COMP%]:focus-visible    + .mj-voice-picker__switch-track[_ngcontent-%COMP%] {\n            outline: 2px solid var(--mj-border-focus); outline-offset: 2px;\n        }\n        @media (prefers-reduced-motion: reduce) {\n            .mj-voice-picker__switch-track[_ngcontent-%COMP%], .mj-voice-picker__switch-track[_ngcontent-%COMP%]::after { transition: none; }\n        }\n        .mj-voice-picker__footer[_ngcontent-%COMP%] {\n            display: flex; align-items: center; gap: 8px;\n            padding: 10px 12px;\n        }"], changeDetection: 0 });
+        } }, dependencies: [MJButtonDirective, MJDropdownComponent, FormsModule, i1.NgSelectOption, i1.ɵNgSelectMultipleOption, i1.NgControlStatus, i1.NgModel], styles: ["[_nghost-%COMP%] {\n            \n\n\n\n\n            display: block;\n            max-height: min(440px, calc(100vh - 24px));\n        }\n        .mj-voice-picker[_ngcontent-%COMP%] {\n            width: 300px;\n            max-width: calc(100vw - 24px);\n            display: flex; flex-direction: column;\n            \n\n            max-height: min(440px, calc(100vh - 120px));\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            \n\n\n\n            flex: 1 1 auto;\n            min-height: 0;\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        \n        .mj-voice-picker__header[_ngcontent-%COMP%], \n   .mj-voice-picker__search[_ngcontent-%COMP%], \n   .mj-voice-picker__select-row[_ngcontent-%COMP%], \n   .mj-voice-picker__record-row[_ngcontent-%COMP%], \n   .mj-voice-picker__footer[_ngcontent-%COMP%] { flex-shrink: 0; }\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        \n\n\n        .mj-voice-picker__voice-row[_ngcontent-%COMP%] {\n            display: grid;\n            grid-template-columns: auto minmax(0, 1fr);\n            column-gap: 8px;\n            align-items: center;\n        }\n        .mj-voice-picker__voice-dropdown[_ngcontent-%COMP%] { min-width: 0; }\n        .mj-voice-picker__voice-hint[_ngcontent-%COMP%] { grid-column: 2; }\n        .mj-voice-picker__voice-hint-line[_ngcontent-%COMP%] {\n            display: flex; align-items: center; gap: 6px;\n            padding-top: 4px;\n            font-size: 11px; color: var(--mj-text-secondary);\n        }\n        .mj-voice-picker__voice-hint-line[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] { font-size: 10px; color: var(--mj-brand-primary); }\n        [_nghost-%COMP%]     .mj-voice-picker__voice-row .mj-dropdown {\n            min-height: 0;\n            padding: 5px 8px;\n            font-size: 12px;\n            background: var(--mj-bg-surface-sunken);\n            border: 1px solid var(--mj-border-subtle);\n            border-radius: 6px;\n        }\n        [_nghost-%COMP%]     .mj-voice-picker__voice-row .mj-dropdown--open, \n   [_nghost-%COMP%]     .mj-voice-picker__voice-row .mj-dropdown:focus-visible { border-color: var(--mj-border-focus); }\n        .mj-voice-picker__voice[_ngcontent-%COMP%] { display: flex; align-items: center; gap: 8px; width: 100%; min-width: 0; }\n        .mj-voice-picker__voice-image[_ngcontent-%COMP%] {\n            width: 20px; height: 20px; flex-shrink: 0;\n            border-radius: 50%; object-fit: cover;\n            background: var(--mj-bg-surface-sunken);\n        }\n        .mj-voice-picker__voice-name[_ngcontent-%COMP%] { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n        .mj-voice-picker__voice-avatar[_ngcontent-%COMP%] { flex-shrink: 0; font-size: 11px; color: var(--mj-brand-primary); }\n        .mj-voice-picker__sr-only[_ngcontent-%COMP%] {\n            position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;\n            overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;\n        }\n        .mj-voice-picker__record-row[_ngcontent-%COMP%] {\n            display: flex; align-items: center; justify-content: space-between; gap: 10px;\n            margin: 10px 12px 2px;\n            padding: 10px 0 2px;\n            border-top: 1px solid var(--mj-border-subtle);\n        }\n        .mj-voice-picker__record-label[_ngcontent-%COMP%] {\n            display: flex; align-items: center; gap: 8px;\n            font-size: 12px; color: var(--mj-text-secondary);\n        }\n        .mj-voice-picker__record-label[_ngcontent-%COMP%]    > i[_ngcontent-%COMP%] { font-size: 12px; color: var(--mj-text-muted); }\n        .mj-voice-picker__record-copy[_ngcontent-%COMP%] { display: flex; flex-direction: column; line-height: 1.3; }\n        .mj-voice-picker__record-copy[_ngcontent-%COMP%]   small[_ngcontent-%COMP%] { font-size: 10px; color: var(--mj-text-muted); }\n        .mj-voice-picker__switch[_ngcontent-%COMP%] { position: relative; flex-shrink: 0; display: inline-flex; cursor: pointer; }\n        .mj-voice-picker__switch[_ngcontent-%COMP%]   input[_ngcontent-%COMP%] {\n            position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer;\n        }\n        .mj-voice-picker__switch-track[_ngcontent-%COMP%] {\n            position: relative; width: 34px; height: 18px; border-radius: 999px;\n            background: var(--mj-border-strong); transition: background 150ms ease;\n        }\n        .mj-voice-picker__switch-track[_ngcontent-%COMP%]::after {\n            content: ''; position: absolute; top: 2px; left: 2px;\n            width: 14px; height: 14px; border-radius: 50%;\n            background: var(--mj-bg-surface); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);\n            transition: transform 150ms ease;\n        }\n        .mj-voice-picker__switch[_ngcontent-%COMP%]   input[_ngcontent-%COMP%]:checked    + .mj-voice-picker__switch-track[_ngcontent-%COMP%] { background: var(--mj-brand-primary); }\n        .mj-voice-picker__switch[_ngcontent-%COMP%]   input[_ngcontent-%COMP%]:checked    + .mj-voice-picker__switch-track[_ngcontent-%COMP%]::after { transform: translateX(16px); }\n        .mj-voice-picker__switch[_ngcontent-%COMP%]   input[_ngcontent-%COMP%]:focus-visible    + .mj-voice-picker__switch-track[_ngcontent-%COMP%] {\n            outline: 2px solid var(--mj-border-focus); outline-offset: 2px;\n        }\n        @media (prefers-reduced-motion: reduce) {\n            .mj-voice-picker__switch-track[_ngcontent-%COMP%], .mj-voice-picker__switch-track[_ngcontent-%COMP%]::after { transition: none; }\n        }\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: `
+        args: [{ standalone: true, selector: 'mj-realtime-agent-picker', imports: [MJButtonDirective, MJDropdownComponent, FormsModule], 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>
@@ -656,22 +741,49 @@ export class RealtimeAgentPickerComponent extends BaseAngularComponent {
                     </select>
                 </div>
                 @if (SelectedModelVoices.length) {
-                    <div class="mj-voice-picker__select-row mj-voice-picker__select-row--model">
-                        <label class="mj-voice-picker__select-label" for="mjRealtimeVoiceSelect">
-                            <i class="fa-solid fa-waveform-lines"></i>
+                    <div class="mj-voice-picker__select-row mj-voice-picker__select-row--model mj-voice-picker__voice-row">
+                        <span class="mj-voice-picker__select-label" id="mjRealtimeVoiceLabel">
+                            <i class="fa-solid fa-wave-square"></i>
                             <span>Voice</span>
-                        </label>
-                        <select
-                            #voiceSelect
-                            id="mjRealtimeVoiceSelect"
-                            class="mj-voice-picker__select"
-                            [value]="SelectedVoiceId ?? ''"
-                            (change)="OnVoiceChange(voiceSelect.value)">
-                            <option value="">Default</option>
-                            @for (v of SelectedModelVoices; track v.ID) {
-                                <option [value]="v.ID">{{ v.Name }}</option>
+                        </span>
+                        <!-- No ValueField: an option is its voice object, one per persona, because two personas
+                             can share a voice id (a voice, and the same voice with a face). -->
+                        <mj-dropdown
+                            class="mj-voice-picker__voice-dropdown"
+                            InputId="mjRealtimeVoiceSelect"
+                            AriaLabelledBy="mjRealtimeVoiceLabel"
+                            AriaDescribedBy="mjRealtimeVoiceHint"
+                            [Data]="SelectedModelVoices"
+                            TextField="Name"
+                            DefaultItem="Default"
+                            [ngModel]="SelectedVoice"
+                            (ValueChange)="OnVoiceChange($event)">
+                            <ng-template #mjDropdownItem let-item>
+                                @if (VoiceOptionFor(item); as voice) {
+                                    <span class="mj-voice-picker__voice">
+                                        @if (PreviewImageFor(voice); as image) {
+                                            <img class="mj-voice-picker__voice-image" [src]="image" alt="" (error)="OnPreviewImageError(image)" />
+                                        }
+                                        <span class="mj-voice-picker__voice-name">{{ voice.Name }}</span>
+                                        @if (voice.AvatarID) {
+                                            <span class="mj-voice-picker__voice-avatar" title="Comes with an avatar">
+                                                <i class="fa-solid fa-video" aria-hidden="true"></i>
+                                                <span class="mj-voice-picker__sr-only">Comes with an avatar</span>
+                                            </span>
+                                        }
+                                    </span>
+                                }
+                            </ng-template>
+                        </mj-dropdown>
+                        <!-- Always present, so screen readers announce the hint when a pick adds it. -->
+                        <div class="mj-voice-picker__voice-hint" id="mjRealtimeVoiceHint" aria-live="polite">
+                            @if (SelectedVoiceHasAvatar) {
+                                <span class="mj-voice-picker__voice-hint-line">
+                                    <i class="fa-solid fa-video" aria-hidden="true"></i>
+                                    <span>Comes with an avatar</span>
+                                </span>
                             }
-                        </select>
+                        </div>
                     </div>
                 }
             }
@@ -699,7 +811,7 @@ export class RealtimeAgentPickerComponent extends BaseAngularComponent {
                 <button mjButton variant="outline" size="sm" (click)="Cancel()">Cancel</button>
             </div>
         </div>
-    `, styles: ["\n        :host {\n            /* Rendered inside a body-level CDK connected overlay (see message-input) \u2014 CDK\n               owns the positioning + z-index, so the host is just a plain block. The height\n               cap keeps the popover from growing past the viewport; the agent list inside\n               scrolls when content exceeds it. CDK's push keeps it on-screen, and because\n               it lives at the body level it can never be clipped by the chat overlay border. */\n            display: block;\n            max-height: min(440px, calc(100vh - 24px));\n        }\n        .mj-voice-picker {\n            width: 300px;\n            max-width: calc(100vw - 24px);\n            display: flex; flex-direction: column;\n            /* Match the host cap so the inner flex column knows its bound and lets the agent\n               list ('mj-voice-picker__list') take the remaining space + scroll. */\n            max-height: min(440px, calc(100vh - 120px));\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            /* The agent list is the flexible region: it scrolls internally and gives way\n               first when the whole popup is capped to the overlay height. min-height:0 lets\n               it actually shrink inside the flex column; the 220px max keeps it tidy when\n               there's plenty of room. */\n            flex: 1 1 auto;\n            min-height: 0;\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        /* Keep the chrome around the list from collapsing when the popup is height-capped. */\n        .mj-voice-picker__header,\n        .mj-voice-picker__search,\n        .mj-voice-picker__select-row,\n        .mj-voice-picker__record-row,\n        .mj-voice-picker__footer { flex-shrink: 0; }\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__record-row {\n            display: flex; align-items: center; justify-content: space-between; gap: 10px;\n            margin: 10px 12px 2px;\n            padding: 10px 0 2px;\n            border-top: 1px solid var(--mj-border-subtle);\n        }\n        .mj-voice-picker__record-label {\n            display: flex; align-items: center; gap: 8px;\n            font-size: 12px; color: var(--mj-text-secondary);\n        }\n        .mj-voice-picker__record-label > i { font-size: 12px; color: var(--mj-text-muted); }\n        .mj-voice-picker__record-copy { display: flex; flex-direction: column; line-height: 1.3; }\n        .mj-voice-picker__record-copy small { font-size: 10px; color: var(--mj-text-muted); }\n        .mj-voice-picker__switch { position: relative; flex-shrink: 0; display: inline-flex; cursor: pointer; }\n        .mj-voice-picker__switch input {\n            position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer;\n        }\n        .mj-voice-picker__switch-track {\n            position: relative; width: 34px; height: 18px; border-radius: 999px;\n            background: var(--mj-border-strong); transition: background 150ms ease;\n        }\n        .mj-voice-picker__switch-track::after {\n            content: ''; position: absolute; top: 2px; left: 2px;\n            width: 14px; height: 14px; border-radius: 50%;\n            background: var(--mj-bg-surface); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);\n            transition: transform 150ms ease;\n        }\n        .mj-voice-picker__switch input:checked + .mj-voice-picker__switch-track { background: var(--mj-brand-primary); }\n        .mj-voice-picker__switch input:checked + .mj-voice-picker__switch-track::after { transform: translateX(16px); }\n        .mj-voice-picker__switch input:focus-visible + .mj-voice-picker__switch-track {\n            outline: 2px solid var(--mj-border-focus); outline-offset: 2px;\n        }\n        @media (prefers-reduced-motion: reduce) {\n            .mj-voice-picker__switch-track, .mj-voice-picker__switch-track::after { transition: none; }\n        }\n        .mj-voice-picker__footer {\n            display: flex; align-items: center; gap: 8px;\n            padding: 10px 12px;\n        }\n    "] }]
+    `, styles: ["\n        :host {\n            /* Rendered inside a body-level CDK connected overlay (see message-input) \u2014 CDK\n               owns the positioning + z-index, so the host is just a plain block. The height\n               cap keeps the popover from growing past the viewport; the agent list inside\n               scrolls when content exceeds it. CDK's push keeps it on-screen, and because\n               it lives at the body level it can never be clipped by the chat overlay border. */\n            display: block;\n            max-height: min(440px, calc(100vh - 24px));\n        }\n        .mj-voice-picker {\n            width: 300px;\n            max-width: calc(100vw - 24px);\n            display: flex; flex-direction: column;\n            /* Match the host cap so the inner flex column knows its bound and lets the agent\n               list ('mj-voice-picker__list') take the remaining space + scroll. */\n            max-height: min(440px, calc(100vh - 120px));\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            /* The agent list is the flexible region: it scrolls internally and gives way\n               first when the whole popup is capped to the overlay height. min-height:0 lets\n               it actually shrink inside the flex column; the 220px max keeps it tidy when\n               there's plenty of room. */\n            flex: 1 1 auto;\n            min-height: 0;\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        /* Keep the chrome around the list from collapsing when the popup is height-capped. */\n        .mj-voice-picker__header,\n        .mj-voice-picker__search,\n        .mj-voice-picker__select-row,\n        .mj-voice-picker__record-row,\n        .mj-voice-picker__footer { flex-shrink: 0; }\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        /* The voice list is an mj-dropdown so its options can carry the avatar mark. The global dropdown styles size\n           it for forms; scoped to this row, its trigger matches the native selects above it. The row is a grid so\n           the hint sits under the dropdown, and an empty hint takes no space. */\n        .mj-voice-picker__voice-row {\n            display: grid;\n            grid-template-columns: auto minmax(0, 1fr);\n            column-gap: 8px;\n            align-items: center;\n        }\n        .mj-voice-picker__voice-dropdown { min-width: 0; }\n        .mj-voice-picker__voice-hint { grid-column: 2; }\n        .mj-voice-picker__voice-hint-line {\n            display: flex; align-items: center; gap: 6px;\n            padding-top: 4px;\n            font-size: 11px; color: var(--mj-text-secondary);\n        }\n        .mj-voice-picker__voice-hint-line i { font-size: 10px; color: var(--mj-brand-primary); }\n        :host ::ng-deep .mj-voice-picker__voice-row .mj-dropdown {\n            min-height: 0;\n            padding: 5px 8px;\n            font-size: 12px;\n            background: var(--mj-bg-surface-sunken);\n            border: 1px solid var(--mj-border-subtle);\n            border-radius: 6px;\n        }\n        :host ::ng-deep .mj-voice-picker__voice-row .mj-dropdown--open,\n        :host ::ng-deep .mj-voice-picker__voice-row .mj-dropdown:focus-visible { border-color: var(--mj-border-focus); }\n        .mj-voice-picker__voice { display: flex; align-items: center; gap: 8px; width: 100%; min-width: 0; }\n        .mj-voice-picker__voice-image {\n            width: 20px; height: 20px; flex-shrink: 0;\n            border-radius: 50%; object-fit: cover;\n            background: var(--mj-bg-surface-sunken);\n        }\n        .mj-voice-picker__voice-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n        .mj-voice-picker__voice-avatar { flex-shrink: 0; font-size: 11px; color: var(--mj-brand-primary); }\n        .mj-voice-picker__sr-only {\n            position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;\n            overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;\n        }\n        .mj-voice-picker__record-row {\n            display: flex; align-items: center; justify-content: space-between; gap: 10px;\n            margin: 10px 12px 2px;\n            padding: 10px 0 2px;\n            border-top: 1px solid var(--mj-border-subtle);\n        }\n        .mj-voice-picker__record-label {\n            display: flex; align-items: center; gap: 8px;\n            font-size: 12px; color: var(--mj-text-secondary);\n        }\n        .mj-voice-picker__record-label > i { font-size: 12px; color: var(--mj-text-muted); }\n        .mj-voice-picker__record-copy { display: flex; flex-direction: column; line-height: 1.3; }\n        .mj-voice-picker__record-copy small { font-size: 10px; color: var(--mj-text-muted); }\n        .mj-voice-picker__switch { position: relative; flex-shrink: 0; display: inline-flex; cursor: pointer; }\n        .mj-voice-picker__switch input {\n            position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer;\n        }\n        .mj-voice-picker__switch-track {\n            position: relative; width: 34px; height: 18px; border-radius: 999px;\n            background: var(--mj-border-strong); transition: background 150ms ease;\n        }\n        .mj-voice-picker__switch-track::after {\n            content: ''; position: absolute; top: 2px; left: 2px;\n            width: 14px; height: 14px; border-radius: 50%;\n            background: var(--mj-bg-surface); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);\n            transition: transform 150ms ease;\n        }\n        .mj-voice-picker__switch input:checked + .mj-voice-picker__switch-track { background: var(--mj-brand-primary); }\n        .mj-voice-picker__switch input:checked + .mj-voice-picker__switch-track::after { transform: translateX(16px); }\n        .mj-voice-picker__switch input:focus-visible + .mj-voice-picker__switch-track {\n            outline: 2px solid var(--mj-border-focus); outline-offset: 2px;\n        }\n        @media (prefers-reduced-motion: reduce) {\n            .mj-voice-picker__switch-track, .mj-voice-picker__switch-track::after { transition: none; }\n        }\n        .mj-voice-picker__footer {\n            display: flex; align-items: center; gap: 8px;\n            padding: 10px 12px;\n        }\n    "] }]
     }], null, { CurrentUser: [{
             type: Input
         }], Agents: [{
@@ -724,5 +836,5 @@ export class RealtimeAgentPickerComponent extends BaseAngularComponent {
             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: 372 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(RealtimeAgentPickerComponent, { className: "RealtimeAgentPickerComponent", filePath: "src/lib/components/realtime/realtime-agent-picker.component.ts", lineNumber: 447 }); })();
 //# sourceMappingURL=realtime-agent-picker.component.js.map