@codingame/monaco-vscode-chat-service-override 36.2.7 → 37.0.0

package/vscode/src/vs/workbench/contrib/agentsVoice/browser/voiceModeOnboarding.js

@@ -0,0 +1,889 @@
+
+import { registerCss } from '@codingame/monaco-vscode-api/css';
+import { __decorate, __param } from '@codingame/monaco-vscode-api/external/tslib/tslib.es6';
+import { getWindow, scheduleAtNextAnimationFrame, addDisposableListener, append, $, clearNode, EventType, isAncestorOfActiveElement } from '@codingame/monaco-vscode-api/vscode/vs/base/browser/dom';
+import { renderFormattedText } from '@codingame/monaco-vscode-api/vscode/vs/base/browser/formattedTextRenderer';
+import { status } from '@codingame/monaco-vscode-api/vscode/vs/base/browser/ui/aria/aria';
+import { SelectBox } from '@codingame/monaco-vscode-api/vscode/vs/base/browser/ui/selectBox/selectBox';
+import { StandardKeyboardEvent } from '@codingame/monaco-vscode-api/vscode/vs/base/browser/keyboardEvent';
+import { Codicon } from '@codingame/monaco-vscode-api/vscode/vs/base/common/codicons';
+import { Emitter } from '@codingame/monaco-vscode-api/vscode/vs/base/common/event';
+import { KeyCode } from '@codingame/monaco-vscode-api/vscode/vs/base/common/keyCodes';
+import { Disposable, MutableDisposable, toDisposable, DisposableStore } from '@codingame/monaco-vscode-api/vscode/vs/base/common/lifecycle';
+import { FileAccess } from '@codingame/monaco-vscode-api/vscode/vs/base/common/network';
+import { localize } from '@codingame/monaco-vscode-api/vscode/vs/nls';
+import { IAccessibilityService } from '@codingame/monaco-vscode-api/vscode/vs/platform/accessibility/common/accessibility.service';
+import { ConfigurationTarget } from '@codingame/monaco-vscode-api/vscode/vs/platform/configuration/common/configuration';
+import { IConfigurationService } from '@codingame/monaco-vscode-api/vscode/vs/platform/configuration/common/configuration.service';
+import '@codingame/monaco-vscode-api/vscode/vs/platform/instantiation/common/extensions';
+import { IInstantiationService } from '@codingame/monaco-vscode-api/vscode/vs/platform/instantiation/common/instantiation';
+import { ICommandService } from '@codingame/monaco-vscode-api/vscode/vs/platform/commands/common/commands.service';
+import { ILogService } from '@codingame/monaco-vscode-api/vscode/vs/platform/log/common/log.service';
+import { IContextViewService } from '@codingame/monaco-vscode-api/vscode/vs/platform/contextview/browser/contextView.service';
+import { StorageScope, StorageTarget } from '@codingame/monaco-vscode-api/vscode/vs/platform/storage/common/storage';
+import { IStorageService } from '@codingame/monaco-vscode-api/vscode/vs/platform/storage/common/storage.service';
+import { ITelemetryService } from '@codingame/monaco-vscode-api/vscode/vs/platform/telemetry/common/telemetry.service';
+import { CONFIGURE_VOICE_INSTRUCTIONS_ACTION_ID } from '@codingame/monaco-vscode-katex-common/vscode/vs/workbench/contrib/chat/browser/actions/configureVoiceInstructionsAction';
+import { ChatInputOnboarding } from '@codingame/monaco-vscode-katex-common/vscode/vs/workbench/contrib/chat/browser/widget/input/chatInputOnboarding';
+import { ChatInputNoticeWidget, ChatInputNoticeVariant } from '@codingame/monaco-vscode-katex-common/vscode/vs/workbench/contrib/chat/browser/widget/input/chatInputNoticeWidget';
+import { IThemeService } from '@codingame/monaco-vscode-api/vscode/vs/platform/theme/common/themeService.service';
+import { defaultSelectBoxStyles } from '@codingame/monaco-vscode-api/vscode/vs/platform/theme/browser/defaultStyles';
+import { asCssVariableWithDefault, asCssVariable } from '@codingame/monaco-vscode-api/vscode/vs/platform/theme/common/colorUtils';
+import '@codingame/monaco-vscode-api/vscode/vs/platform/theme/common/colors/baseColors';
+import '@codingame/monaco-vscode-api/vscode/vs/platform/theme/common/colors/chartsColors';
+import '@codingame/monaco-vscode-api/vscode/vs/platform/theme/common/colors/editorColors';
+import { selectListBackground, selectBackground } from '@codingame/monaco-vscode-api/vscode/vs/platform/theme/common/colors/inputColors';
+import '@codingame/monaco-vscode-api/vscode/vs/platform/theme/common/colors/listColors';
+import '@codingame/monaco-vscode-api/vscode/vs/platform/theme/common/colors/menuColors';
+import '@codingame/monaco-vscode-api/vscode/vs/platform/theme/common/colors/minimapColors';
+import '@codingame/monaco-vscode-api/vscode/vs/platform/theme/common/colors/miscColors';
+import '@codingame/monaco-vscode-api/vscode/vs/platform/theme/common/colors/quickpickColors';
+import '@codingame/monaco-vscode-api/vscode/vs/platform/theme/common/colors/searchColors';
+import { AgentsVoiceStorageKeys } from '@codingame/monaco-vscode-api/vscode/vs/workbench/contrib/agentsVoice/common/agentsVoice';
+import { buildMicrophoneOptions, indexOfMicrophone } from '@codingame/monaco-vscode-katex-common/vscode/vs/workbench/contrib/chat/browser/speechToText/dictationOnboarding';
+import * as voiceModeOnboarding from './media/voiceModeOnboarding.css';
+
+registerCss(voiceModeOnboarding);
+const VOICE_SETTING = "agents.voice.voice";
+const VOICE_LANGUAGE_SETTING = "agents.voice.language";
+const VOICE_SETTINGS_COMMAND = "agentsVoice.openSettings";
+const VOICES = [{
+    id: "birch_neutral",
+    sampleId: "maya_neutral",
+    label: ( localize(5199, "Birch (Default)")),
+    signature: [{
+        frequency: 1.0,
+        amplitude: 0.42,
+        speed: 0.42,
+        phase: 0.0
+    }, {
+        frequency: 1.7,
+        amplitude: 0.26,
+        speed: -0.31,
+        phase: 1.1
+    }, {
+        frequency: 2.6,
+        amplitude: 0.19,
+        speed: 0.24,
+        phase: 2.4
+    }, {
+        frequency: 4.1,
+        amplitude: 0.13,
+        speed: -0.18,
+        phase: 0.7
+    }]
+}, {
+    id: "harper_neutral",
+    sampleId: "victoria_neutral",
+    label: ( localize(5200, "Harper")),
+    signature: [{
+        frequency: 1.4,
+        amplitude: 0.38,
+        speed: 0.52,
+        phase: 0.0
+    }, {
+        frequency: 2.3,
+        amplitude: 0.27,
+        speed: -0.38,
+        phase: 1.1
+    }, {
+        frequency: 3.6,
+        amplitude: 0.21,
+        speed: 0.30,
+        phase: 2.4
+    }, {
+        frequency: 5.2,
+        amplitude: 0.14,
+        speed: -0.22,
+        phase: 0.7
+    }]
+}, {
+    id: "oak_neutral",
+    sampleId: "kevin_neutral",
+    label: ( localize(5201, "Oak")),
+    signature: [{
+        frequency: 0.7,
+        amplitude: 0.48,
+        speed: 0.30,
+        phase: 0.4
+    }, {
+        frequency: 1.2,
+        amplitude: 0.28,
+        speed: -0.22,
+        phase: 1.7
+    }, {
+        frequency: 2.0,
+        amplitude: 0.16,
+        speed: 0.18,
+        phase: 0.9
+    }, {
+        frequency: 3.1,
+        amplitude: 0.09,
+        speed: -0.14,
+        phase: 2.2
+    }]
+}, {
+    id: "junho_neutral",
+    sampleId: "daniel_neutral",
+    label: ( localize(5202, "Junho")),
+    signature: [{
+        frequency: 0.9,
+        amplitude: 0.44,
+        speed: 0.24,
+        phase: 1.3
+    }, {
+        frequency: 1.5,
+        amplitude: 0.30,
+        speed: -0.18,
+        phase: 0.2
+    }, {
+        frequency: 2.4,
+        amplitude: 0.14,
+        speed: 0.15,
+        phase: 2.0
+    }, {
+        frequency: 3.4,
+        amplitude: 0.10,
+        speed: -0.12,
+        phase: 1.5
+    }]
+}];
+const LOCALIZED_VOICES = {
+    de: {
+        id: "de_marc_neutral",
+        label: ( localize(5203, "Marc"))
+    },
+    es: {
+        id: "es-ES_maria_neutral",
+        label: ( localize(5204, "Maria"))
+    },
+    fr: {
+        id: "fr_david_neutral",
+        label: ( localize(5205, "David"))
+    },
+    it: {
+        id: "it_eva_neutral",
+        label: ( localize(5206, "Eva"))
+    },
+    ja: {
+        id: "ja_aruha_neutral",
+        label: ( localize(5207, "Aruha"))
+    },
+    ko: {
+        id: "ko_jiyon_neutral",
+        label: ( localize(5208, "Jiyon"))
+    },
+    pt: {
+        id: "pt-BR_gil_neutral",
+        label: ( localize(5209, "Gil"))
+    },
+    zh: {
+        id: "zh_wuzhi_neutral",
+        label: ( localize(5210, "Wuzhi"))
+    }
+};
+function localizedVoiceForLanguage(language) {
+    try {
+        const canonical = Intl.getCanonicalLocales(language.trim())[0];
+        const base = canonical?.split("-")[0].toLowerCase();
+        return base ? LOCALIZED_VOICES[base] : undefined;
+    } catch {
+        return undefined;
+    }
+}
+const RESTING_SIGNATURE = ( VOICES[0].signature.map((_, index) => {
+    const components = ( VOICES.map(voice => voice.signature[index]));
+    const mean = pick => components.reduce((sum, wave) => sum + pick(wave), 0) / components.length;
+    return {
+        frequency: mean(wave => wave.frequency),
+        amplitude: mean(wave => wave.amplitude),
+        speed: mean(wave => wave.speed),
+        phase: mean(wave => wave.phase)
+    };
+}));
+const IDLE_CYCLE_SECONDS = 2.6;
+const WAVE_TEMPO = (2 * Math.PI) / IDLE_CYCLE_SECONDS / Math.abs(RESTING_SIGNATURE[0].speed);
+const IDLE_GAIN = 0.5;
+const SPEAKING_GAIN = 0.45;
+const IDLE_MOTION = 0.2;
+const SPEAKING_MOTION = 0.8;
+const LEVEL_EASING = 0.08;
+const SIGNATURE_EASING = 0.06;
+const REFERENCE_FRAME_SECONDS = 1 / 60;
+const BAR_WIDTH = 1;
+const BAR_GAP = 2;
+const BAR_MIN = 1;
+function cloneSignature(signature) {
+    return ( signature.map(wave => ({
+        ...wave,
+        oscillation: 0
+    })));
+}
+function easingFactor(perFrameEasing, dt) {
+    return 1 - Math.pow(1 - perFrameEasing, dt / REFERENCE_FRAME_SECONDS);
+}
+function easeSignature(current, target, factor) {
+    for (let i = 0; i < current.length && i < target.length; i++) {
+        current[i].frequency += (target[i].frequency - current[i].frequency) * factor;
+        current[i].amplitude += (target[i].amplitude - current[i].amplitude) * factor;
+        current[i].speed += (target[i].speed - current[i].speed) * factor;
+        current[i].phase += (target[i].phase - current[i].phase) * factor;
+    }
+}
+function advanceOscillation(waves, dt) {
+    const tau = 2 * Math.PI;
+    for (const wave of waves) {
+        wave.oscillation = (wave.oscillation + wave.speed * WAVE_TEMPO * dt) % tau;
+    }
+}
+function drawBars(context, width, height, waves, gain) {
+    const pitch = BAR_WIDTH + BAR_GAP;
+    const count = Math.max(1, Math.floor(width / pitch));
+    const inset = (width - (count * pitch - BAR_GAP)) / 2;
+    const centerY = height / 2;
+    const maxHalf = height / 2;
+    for (let index = 0; index < count; index++) {
+        const position = count > 1 ? index / (count - 1) : 0;
+        const amount = bandFraction(position, waves) * gain;
+        const half = Math.max(BAR_MIN / 2, Math.min(maxHalf, amount * maxHalf));
+        context.beginPath();
+        context.roundRect(inset + index * pitch, centerY - half, BAR_WIDTH, half * 2, BAR_WIDTH / 2);
+        context.fill();
+    }
+}
+function bandFraction(position, waves) {
+    let amplitude = 0;
+    let total = 0;
+    for (const wave of waves) {
+        const phase = position * wave.frequency * Math.PI * 2 + wave.oscillation + wave.phase;
+        amplitude += (0.5 + 0.5 * Math.sin(phase)) * wave.amplitude;
+        total += wave.amplitude;
+    }
+    if (total === 0) {
+        return 0;
+    }
+    const taper = Math.sin(Math.PI * Math.min(1, Math.max(0, position)));
+    return (amplitude / total) * (0.35 + 0.65 * taper);
+}
+let VoiceModeOnboardingAnimator = class VoiceModeOnboardingAnimator extends Disposable {
+    constructor(canvas, container, source, themeService, accessibilityService) {
+        super();
+        this.canvas = canvas;
+        this.container = container;
+        this.source = source;
+        this.themeService = themeService;
+        this.accessibilityService = accessibilityService;
+        this.animationFrame = this._register(( new MutableDisposable()));
+        this.width = 0;
+        this.height = 0;
+        this.running = false;
+        this.suspended = false;
+        this.level = 0;
+        this.stroke = "";
+        const context = canvas.getContext("2d");
+        if (!context) {
+            throw ( new Error("Failed to create the Voice Mode onboarding canvas context"));
+        }
+        this.context = context;
+        this.waves = cloneSignature(this.source.getSignature());
+        const targetWindow = getWindow(container);
+        const observer = new targetWindow.ResizeObserver(() => this.resize());
+        observer.observe(container);
+        this._register(toDisposable(() => observer.disconnect()));
+        this._register(this.themeService.onDidColorThemeChange(() => {
+            this.readStroke();
+            this.draw(targetWindow.performance.now());
+        }));
+        this._register(
+            this.accessibilityService.onDidChangeReducedMotion(() => this.updateMotion())
+        );
+        this._register(toDisposable(() => this.stop()));
+        this.readStroke();
+        this.resize();
+        this.updateMotion();
+    }
+    readStroke() {
+        this.stroke = getWindow(this.canvas).getComputedStyle(this.canvas).color;
+    }
+    updateMotion() {
+        if (this.suspended || this.accessibilityService.isMotionReduced()) {
+            this.stop();
+            this.draw(getWindow(this.container).performance.now());
+        } else {
+            this.start();
+        }
+    }
+    setSuspended(suspended) {
+        if (this.suspended === suspended) {
+            return;
+        }
+        this.suspended = suspended;
+        this.updateMotion();
+    }
+    start() {
+        if (this.running) {
+            return;
+        }
+        this.running = true;
+        const targetWindow = getWindow(this.container);
+        const tick = time => {
+            if (!this.running) {
+                return;
+            }
+            this.draw(time);
+            this.animationFrame.value = scheduleAtNextAnimationFrame(targetWindow, () => tick(targetWindow.performance.now()));
+        };
+        this.animationFrame.value = scheduleAtNextAnimationFrame(targetWindow, () => tick(targetWindow.performance.now()));
+    }
+    stop() {
+        this.running = false;
+        this.animationFrame.clear();
+    }
+    resize() {
+        const targetWindow = getWindow(this.container);
+        const devicePixelRatio = targetWindow.devicePixelRatio || 1;
+        this.width = this.container.offsetWidth;
+        this.height = this.container.offsetHeight;
+        if (!this.width || !this.height) {
+            return;
+        }
+        this.canvas.width = this.width * devicePixelRatio;
+        this.canvas.height = this.height * devicePixelRatio;
+        this.context.setTransform(devicePixelRatio, 0, 0, devicePixelRatio, 0, 0);
+        this.draw(targetWindow.performance.now());
+    }
+    draw(timestamp) {
+        if (!this.width || !this.height) {
+            return;
+        }
+        const dt = this.lastTimestamp === undefined ? 0 : Math.max(0, (timestamp - this.lastTimestamp) * 0.001);
+        this.lastTimestamp = timestamp;
+        this.level += (this.source.getLevel() - this.level) * easingFactor(LEVEL_EASING, dt);
+        easeSignature(this.waves, this.source.getSignature(), easingFactor(SIGNATURE_EASING, dt));
+        advanceOscillation(this.waves, dt * (IDLE_MOTION + this.level * SPEAKING_MOTION));
+        const gain = IDLE_GAIN + this.level * SPEAKING_GAIN;
+        this.context.clearRect(0, 0, this.width, this.height);
+        this.context.fillStyle = this.stroke;
+        drawBars(this.context, this.width, this.height, this.waves, gain);
+    }
+};
+VoiceModeOnboardingAnimator = ( __decorate([( __param(3, IThemeService)), ( __param(4, IAccessibilityService))], VoiceModeOnboardingAnimator));
+let VoiceSamplePlayer = class VoiceSamplePlayer extends Disposable {
+    get playingVoice() {
+        return this._playingVoice;
+    }
+    constructor(element, audioFactory, logService) {
+        super();
+        this.element = element;
+        this.audioFactory = audioFactory;
+        this.logService = logService;
+        this.playback = this._register(( new MutableDisposable()));
+        this._onDidChangePlayingVoice = this._register(( new Emitter()));
+        this.onDidChangePlayingVoice = this._onDidChangePlayingVoice.event;
+        this._register(toDisposable(() => this.stop()));
+    }
+    getLevel() {
+        if (!this.analyser || !this.levels || !this._playingVoice) {
+            return 0;
+        }
+        this.analyser.getByteTimeDomainData(this.levels);
+        let sum = 0;
+        for (const sample of this.levels) {
+            const centered = (sample - 128) / 128;
+            sum += centered * centered;
+        }
+        return Math.min(1, Math.sqrt(sum / this.levels.length) * 3.2);
+    }
+    play(sampleId, playingVoice = sampleId) {
+        this.stop();
+        try {
+            const audio = this.ensureAudio();
+            audio.src = ( ( FileAccess.asBrowserUri(`vs/workbench/contrib/agentsVoice/browser/media/${sampleId}.mp3`)).toString(true));
+            const store = ( new DisposableStore());
+            store.add(addDisposableListener(audio, "ended", () => this.stop()));
+            store.add(addDisposableListener(audio, "error", () => this.stop()));
+            store.add(toDisposable(() => audio.pause()));
+            this.playback.value = store;
+            this.setPlayingVoice(playingVoice);
+            audio.play().catch(error => {
+                this.logService.trace(`[voice] Voice Mode onboarding preview failed: ${error}`);
+                this.stop();
+            });
+        } catch (error) {
+            this.logService.trace(`[voice] Voice Mode onboarding preview unavailable: ${error}`);
+            this.stop();
+        }
+    }
+    ensureAudio() {
+        if (this.audio) {
+            return this.audio;
+        }
+        const targetWindow = getWindow(this.element);
+        const audio = this.audioFactory?.() ?? new targetWindow.Audio();
+        this.audio = audio;
+        this._register(toDisposable(() => {
+            audio.pause();
+            audio.src = "";
+        }));
+        if (this.audioFactory) {
+            return audio;
+        }
+        try {
+            const context = new targetWindow.AudioContext();
+            this._register(toDisposable(() => void context.close().catch(() => {})));
+            const analyser = context.createAnalyser();
+            analyser.fftSize = 256;
+            context.createMediaElementSource(audio).connect(analyser);
+            analyser.connect(context.destination);
+            this.analyser = analyser;
+            this.levels = ( new Uint8Array(analyser.fftSize));
+        } catch (error) {
+            this.logService.trace(`[voice] Voice Mode onboarding analyser unavailable: ${error}`);
+        }
+        return audio;
+    }
+    stop() {
+        this.playback.clear();
+        this.setPlayingVoice(undefined);
+    }
+    setPlayingVoice(voiceId) {
+        if (this._playingVoice === voiceId) {
+            return;
+        }
+        this._playingVoice = voiceId;
+        this._onDidChangePlayingVoice.fire(voiceId);
+    }
+};
+VoiceSamplePlayer = ( __decorate([( __param(2, ILogService))], VoiceSamplePlayer));
+let VoiceModeOnboardingBanner = class VoiceModeOnboardingBanner extends ChatInputNoticeWidget {
+    constructor(
+        options,
+        commandService,
+        configurationService,
+        contextViewService,
+        instantiationService,
+        logService,
+        storageService,
+        telemetryService
+    ) {
+        super({
+            container: options.container,
+            variant: ChatInputNoticeVariant.Onboarding,
+            className: "voice-mode-onboarding-banner",
+            ariaLabel: ( localize(5211, "Voice Mode introduction")),
+            ariaDescription: ( localize(5212, "Choose how your agent speaks to you. Adjust settings anytime.")),
+            onEscape: () => {
+                this.logAction("escape");
+                this.options.onDismiss();
+            }
+        });
+        this.commandService = commandService;
+        this.configurationService = configurationService;
+        this.contextViewService = contextViewService;
+        this.logService = logService;
+        this.storageService = storageService;
+        this.telemetryService = telemetryService;
+        this.microphonePicker = this._register(( new MutableDisposable()));
+        this.microphoneOptions = [];
+        this.voiceElements = ( new Map());
+        this.voicesDisposables = this._register(( new DisposableStore()));
+        this.options = options;
+        this.localizedVoice = localizedVoiceForLanguage(this.resolveSpokenLanguage());
+        this.player = this._register(
+            instantiationService.createInstance(VoiceSamplePlayer, this.domNode, options.audioFactory)
+        );
+        this._register(
+            this.player.onDidChangePlayingVoice(voiceId => this.updatePlaying(voiceId))
+        );
+        const copy = append(this.domNode, $(".voice-mode-onboarding-copy"));
+        const title = append(copy, $(".chat-input-notice-title.voice-mode-onboarding-title"));
+        title.textContent = ( localize(5213, "Welcome to Voice Mode"));
+        this.renderDescription(copy);
+        this.renderSharedWaveform(instantiationService);
+        this.renderMicrophonePicker();
+        const actions = append(this.domNode, $(".voice-mode-onboarding-actions"));
+        this.voicesContainer = actions;
+        this.renderVoices();
+        this.renderClose();
+        this.logAction("shown");
+        this._register(this.configurationService.onDidChangeConfiguration(event => {
+            if (event.affectsConfiguration(VOICE_LANGUAGE_SETTING)) {
+                this.updateForLanguage();
+            }
+        }));
+    }
+    currentSignature() {
+        return this.selectedVoice?.signature ?? RESTING_SIGNATURE;
+    }
+    renderSharedWaveform(instantiationService) {
+        const wave = append(this.domNode, $(".voice-mode-onboarding-wave"));
+        const canvas = append(wave, $("canvas.voice-mode-onboarding-canvas"));
+        canvas.setAttribute("aria-hidden", "true");
+        this.animator = this._register(
+            instantiationService.createInstance(VoiceModeOnboardingAnimator, canvas, wave, {
+                getLevel: () => this.player.getLevel(),
+                getSignature: () => this.currentSignature()
+            })
+        );
+    }
+    renderMicrophonePicker() {
+        this.microphonePickerContainer = append(
+            this.domNode,
+            $(".chat-input-notice-picker.voice-mode-onboarding-microphone-picker")
+        );
+        this.microphoneOptions = [{
+            deviceId: "",
+            label: ( localize(5214, "System default"))
+        }];
+        this.updateMicrophonePicker();
+        const mediaDevices = getWindow(this.domNode).navigator.mediaDevices;
+        if (mediaDevices) {
+            this._register(
+                addDisposableListener(mediaDevices, "devicechange", () => void this.refreshMicrophones())
+            );
+            void this.refreshMicrophones();
+        }
+    }
+    async refreshMicrophones() {
+        const mediaDevices = getWindow(this.domNode).navigator.mediaDevices;
+        if (!mediaDevices?.enumerateDevices) {
+            return;
+        }
+        let devices;
+        try {
+            devices = await mediaDevices.enumerateDevices();
+        } catch (error) {
+            this.logService.trace(`[voice] could not enumerate microphones: ${error}`);
+            return;
+        }
+        if (this._store.isDisposed) {
+            return;
+        }
+        const options = buildMicrophoneOptions(devices);
+        if (options.length > 1 && !( devices.some(device => device.kind === "audioinput" && device.label))) {
+            return;
+        }
+        this.microphoneOptions = options;
+        this.updateMicrophonePicker();
+    }
+    updateMicrophonePicker() {
+        if (!this.microphonePickerContainer) {
+            return;
+        }
+        this.microphonePicker.clear();
+        clearNode(this.microphonePickerContainer);
+        this.microphonePickerContainer.hidden = this.microphoneOptions.length <= 1;
+        if (this.microphonePickerContainer.hidden) {
+            return;
+        }
+        append(this.microphonePickerContainer, $(
+            `span.codicon.codicon-${Codicon.mic.id}.voice-mode-onboarding-microphone-icon`
+        )).setAttribute("aria-hidden", "true");
+        const selected = indexOfMicrophone(this.microphoneOptions, this.currentMicrophoneId());
+        const store = ( new DisposableStore());
+        const selectBox = store.add(( new SelectBox(( this.microphoneOptions.map(option => ({
+            text: option.label
+        }))), selected, this.contextViewService, {
+            ...defaultSelectBoxStyles,
+            selectBackground: undefined,
+            selectBorder: undefined,
+            selectForeground: undefined,
+            selectListBackground: asCssVariableWithDefault(selectListBackground, asCssVariable(selectBackground))
+        }, {
+            ariaLabel: ( localize(5215, "Microphone")),
+            useCustomDrawn: true
+        })));
+        selectBox.render(this.microphonePickerContainer);
+        store.add(selectBox.onDidSelect(event => this.selectMicrophone(event.index)));
+        this.microphonePicker.value = store;
+    }
+    currentMicrophoneId() {
+        return this.storageService.get(AgentsVoiceStorageKeys.MicrophoneDevice, StorageScope.APPLICATION, "");
+    }
+    selectMicrophone(index) {
+        const option = this.microphoneOptions[index];
+        if (!option) {
+            return;
+        }
+        this.logAction("selectMicrophone");
+        if (option.deviceId) {
+            this.storageService.store(
+                AgentsVoiceStorageKeys.MicrophoneDevice,
+                option.deviceId,
+                StorageScope.APPLICATION,
+                StorageTarget.MACHINE
+            );
+        } else {
+            this.storageService.remove(AgentsVoiceStorageKeys.MicrophoneDevice, StorageScope.APPLICATION);
+        }
+        status(( localize(5216, "{0} selected.", option.label)));
+    }
+    renderVoices() {
+        const container = this.voicesContainer;
+        if (!container) {
+            return;
+        }
+        this.voicesDisposables.clear();
+        this.voiceElements.clear();
+        clearNode(container);
+        const labelText = ( localize(5217, "Agent Voice:"));
+        const label = append(container, $(".voice-mode-onboarding-voices-label"));
+        label.textContent = labelText;
+        if (this.localizedVoice) {
+            this.renderLocalizedVoice(container, labelText, this.localizedVoice);
+            return;
+        }
+        const group = append(container, $(".voice-mode-onboarding-voices"));
+        group.setAttribute("role", "radiogroup");
+        group.setAttribute("aria-label", labelText);
+        for (const voice of VOICES) {
+            const option = append(group, $(".voice-mode-onboarding-voice"));
+            option.setAttribute("role", "radio");
+            const restingAria = ( localize(
+                5218,
+                "{0}. Hear this voice and use it for every conversation.",
+                voice.label
+            ));
+            option.setAttribute("aria-label", restingAria);
+            this.appendVoiceIcon(option);
+            const label = append(option, $("span.voice-mode-onboarding-voice-label"));
+            label.textContent = voice.label;
+            this.voiceElements.set(voice.id, {
+                element: option,
+                label: voice.label,
+                restingAria
+            });
+            this.voicesDisposables.add(
+                addDisposableListener(option, EventType.CLICK, () => this.selectVoice(voice))
+            );
+            this.voicesDisposables.add(addDisposableListener(
+                option,
+                EventType.KEY_DOWN,
+                event => this.handleOptionKey(event, voice)
+            ));
+        }
+        this.updateSelection();
+    }
+    updateForLanguage() {
+        const localizedVoice = localizedVoiceForLanguage(this.resolveSpokenLanguage());
+        if (localizedVoice?.id === this.localizedVoice?.id) {
+            return;
+        }
+        const hadVoiceFocus = this.voicesContainer ? isAncestorOfActiveElement(this.voicesContainer) : false;
+        this.player.stop();
+        this.localizedVoice = localizedVoice;
+        this.selectedVoice = undefined;
+        this.renderVoices();
+        if (hadVoiceFocus) {
+            ( this.voiceElements.values()).next().value?.element.focus();
+        }
+    }
+    renderLocalizedVoice(container, ariaLabel, voice) {
+        const group = append(container, $(".voice-mode-onboarding-voices"));
+        group.setAttribute("aria-label", ariaLabel);
+        const option = append(group, $(".voice-mode-onboarding-voice"));
+        option.setAttribute("role", "button");
+        option.tabIndex = 0;
+        const restingAria = ( localize(5219, "{0}. Hear how your agent will sound.", voice.label));
+        option.setAttribute("aria-label", restingAria);
+        this.appendVoiceIcon(option);
+        const label = append(option, $("span.voice-mode-onboarding-voice-label"));
+        label.textContent = voice.label;
+        this.voiceElements.set(voice.id, {
+            element: option,
+            label: voice.label,
+            restingAria
+        });
+        this.voicesDisposables.add(
+            addDisposableListener(option, EventType.CLICK, () => this.previewLocalizedVoice(voice))
+        );
+        this.voicesDisposables.add(addDisposableListener(option, EventType.KEY_DOWN, event => {
+            const keyboardEvent = ( new StandardKeyboardEvent(event));
+            if (keyboardEvent.equals(KeyCode.Enter) || keyboardEvent.equals(KeyCode.Space)) {
+                keyboardEvent.preventDefault();
+                this.previewLocalizedVoice(voice);
+            }
+        }));
+    }
+    appendVoiceIcon(option) {
+        const icon = append(option, $("span.voice-mode-onboarding-voice-icon"));
+        append(
+            icon,
+            $(`span.codicon.codicon-${Codicon.play.id}.voice-mode-onboarding-voice-idle`)
+        ).setAttribute("aria-hidden", "true");
+        append(icon, $(
+            `span.codicon.codicon-${Codicon.checkCompact.id}.voice-mode-onboarding-voice-chosen`
+        )).setAttribute("aria-hidden", "true");
+        const bars = append(icon, $("span.voice-mode-onboarding-voice-bars"));
+        bars.setAttribute("aria-hidden", "true");
+        for (let bar = 0; bar < 3; bar++) {
+            append(bars, $("span.voice-mode-onboarding-voice-bar"));
+        }
+    }
+    handleOptionKey(event, voice) {
+        const keyboardEvent = ( new StandardKeyboardEvent(event));
+        if (keyboardEvent.equals(KeyCode.Enter) || keyboardEvent.equals(KeyCode.Space)) {
+            keyboardEvent.preventDefault();
+            this.selectVoice(voice);
+            return;
+        }
+        const forward = keyboardEvent.equals(KeyCode.RightArrow) || keyboardEvent.equals(KeyCode.DownArrow);
+        const backward = keyboardEvent.equals(KeyCode.LeftArrow) || keyboardEvent.equals(KeyCode.UpArrow);
+        if (forward || backward) {
+            keyboardEvent.preventDefault();
+            const index = VOICES.indexOf(voice);
+            const next = VOICES[(index + (forward ? 1 : VOICES.length - 1)) % VOICES.length];
+            this.selectVoice(next);
+            this.voiceElements.get(next.id)?.element.focus();
+        }
+    }
+    renderDescription(container) {
+        const description = append(
+            container,
+            $(".chat-input-notice-description.voice-mode-onboarding-description")
+        );
+        const text = ( localize(
+            5220,
+            "Choose how your agent speaks to you. Adjust [[settings]] or [[how it's written]] anytime."
+        ));
+        append(description, renderFormattedText(text, {
+            actionHandler: {
+                callback: index => {
+                    const commandId = index === "0" ? VOICE_SETTINGS_COMMAND : CONFIGURE_VOICE_INSTRUCTIONS_ACTION_ID;
+                    this.logAction(index === "0" ? "openSettings" : "openInstructions");
+                    this.commandService.executeCommand(commandId).catch(
+                        error => this.logService.error(`[voice] Failed to run ${commandId}: ${error}`)
+                    );
+                },
+                disposables: this._store
+            }
+        }, $("span")));
+        for (const link of description.querySelectorAll("a")) {
+            link.tabIndex = 0;
+            link.setAttribute("role", "button");
+            this._register(addDisposableListener(link, EventType.KEY_DOWN, event => {
+                const keyboardEvent = ( new StandardKeyboardEvent(event));
+                if (keyboardEvent.equals(KeyCode.Enter) || keyboardEvent.equals(KeyCode.Space)) {
+                    keyboardEvent.preventDefault();
+                    link.click();
+                }
+            }));
+        }
+    }
+    renderClose() {
+        this.addDismissAction({
+            className: "voice-mode-onboarding-close",
+            ariaLabel: ( localize(5221, "Close the introduction")),
+            onActivate: () => this.finish()
+        });
+    }
+    setVisible(visible) {
+        super.setVisible(visible);
+        this.animator?.setSuspended(!visible);
+        if (!visible) {
+            this.player.stop();
+        }
+    }
+    selectVoice(voice) {
+        if (this.player.playingVoice === voice.id) {
+            this.player.stop();
+            status(( localize(5222, "{0} preview stopped.", voice.label)));
+            return;
+        }
+        this.logAction("selectVoice");
+        this.selectedVoice = voice;
+        this.updateSelection();
+        this.player.play(voice.sampleId, voice.id);
+        status(( localize(5223, "{0} selected.", voice.label)));
+        this.configurationService.updateValue(VOICE_SETTING, voice.id, ConfigurationTarget.USER).catch(
+            error => this.logService.error(`[voice] Failed to persist the Voice Mode voice: ${error}`)
+        );
+    }
+    previewLocalizedVoice(voice) {
+        if (this.player.playingVoice === voice.id) {
+            this.player.stop();
+            status(( localize(5224, "{0} preview stopped.", voice.label)));
+            return;
+        }
+        this.logAction("previewVoice");
+        this.player.play(voice.id);
+        status(( localize(5225, "Playing {0} preview.", voice.label)));
+    }
+    resolveSpokenLanguage() {
+        if (this.options.voiceLanguage) {
+            return this.options.voiceLanguage;
+        }
+        const configuredLanguage = this.configurationService.getValue(VOICE_LANGUAGE_SETTING)?.trim();
+        if (configuredLanguage && configuredLanguage.toLowerCase() !== "auto") {
+            return configuredLanguage;
+        }
+        return getWindow(this.domNode).navigator.language;
+    }
+    updateSelection() {
+        for (const [id, entry] of this.voiceElements) {
+            const selected = id === this.selectedVoice?.id;
+            entry.element.classList.toggle("selected", selected);
+            entry.element.setAttribute("aria-checked", String(selected));
+        }
+        this.updateTabStop();
+    }
+    updateTabStop() {
+        let first = true;
+        for (const [id, entry] of this.voiceElements) {
+            const isTabStop = this.selectedVoice === undefined ? first : id === this.selectedVoice.id;
+            entry.element.tabIndex = isTabStop ? 0 : -1;
+            first = false;
+        }
+    }
+    updatePlaying(playingVoice) {
+        for (const [id, entry] of this.voiceElements) {
+            const playing = id === playingVoice;
+            entry.element.classList.toggle("playing", playing);
+            entry.element.setAttribute("aria-label", playing ? ( localize(5226, "Stop {0} preview.", entry.label)) : entry.restingAria);
+        }
+        this.domNode.classList.toggle("playing", playingVoice !== undefined);
+    }
+    finish() {
+        this.player.stop();
+        this.logAction("close");
+        this.options.onDismiss();
+    }
+    logAction(action) {
+        this.telemetryService.publicLog2("voiceModeOnboarding.action", {
+            action,
+            source: this.options.source
+        });
+    }
+};
+VoiceModeOnboardingBanner = ( __decorate([( __param(1, ICommandService)), ( __param(2, IConfigurationService)), ( __param(3, IContextViewService)), ( __param(4, IInstantiationService)), ( __param(5, ILogService)), ( __param(6, IStorageService)), ( __param(7, ITelemetryService))], VoiceModeOnboardingBanner));
+let VoiceModeOnboardingService = class VoiceModeOnboardingService extends Disposable {
+    get isVisible() {
+        return this.onboarding.isVisible;
+    }
+    constructor(instantiationService) {
+        super();
+        this.instantiationService = instantiationService;
+        this.onboarding = this._register(this.instantiationService.createInstance(ChatInputOnboarding, {
+            storageKey: AgentsVoiceStorageKeys.IntroBannerShown
+        }));
+    }
+    registerHost(options) {
+        return this.onboarding.registerHost(options);
+    }
+    showIfNeeded() {
+        this.onboarding.showIfNeeded(context => this.createBanner(context, "automatic"));
+    }
+    show() {
+        return this.onboarding.show(context => this.createBanner(context, "manual"));
+    }
+    createBanner(context, source) {
+        return this.instantiationService.createInstance(VoiceModeOnboardingBanner, {
+            container: context.container,
+            onDismiss: () => context.dismiss(isAncestorOfActiveElement(context.container)),
+            source
+        });
+    }
+};
+VoiceModeOnboardingService = ( __decorate([( __param(0, IInstantiationService))], VoiceModeOnboardingService));
+
+export { VoiceModeOnboardingBanner, VoiceModeOnboardingService };