@codingame/monaco-vscode-chat-service-override 34.1.3 → 35.0.1

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

@@ -0,0 +1,898 @@
+
+import { $, addDisposableListener, getWindow, clearNode } from '@codingame/monaco-vscode-api/vscode/vs/base/browser/dom';
+import '@codingame/monaco-vscode-api/vscode/vs/base/common/observableInternal/index';
+import { Disposable, toDisposable } from '@codingame/monaco-vscode-api/vscode/vs/base/common/lifecycle';
+import { localize } from '@codingame/monaco-vscode-api/vscode/vs/nls';
+import { AGENTS_VOICE_WINDOW_DEFAULT_WIDTH, AGENTS_VOICE_WINDOW_DEFAULT_HEIGHT } from '../common/agentsVoice.js';
+import { createHeader } from './components/headerComponent.js';
+import { createStatusRows } from './components/statusRowsComponent.js';
+import { createTranscript } from './components/transcriptComponent.js';
+import { createSessionList } from './components/sessionListComponent.js';
+import { createFeedbackDialog } from './components/feedbackDialog.js';
+import { createOnboarding } from './components/onboardingComponent.js';
+import { createVoiceBar } from './components/voiceBarComponent.js';
+import { FONT_SIZE, addKeyboardActivation } from './components/tokens.js';
+import { observableValue } from '@codingame/monaco-vscode-api/vscode/vs/base/common/observableInternal/observables/observableValue';
+import { derived } from '@codingame/monaco-vscode-api/vscode/vs/base/common/observableInternal/observables/derived';
+import { autorun } from '@codingame/monaco-vscode-api/vscode/vs/base/common/observableInternal/reactions/autorun';
+
+const DEFAULT_OPTIONS = {
+    width: AGENTS_VOICE_WINDOW_DEFAULT_WIDTH,
+    draggable: true,
+    showClose: true,
+    showExpandChevron: true,
+    showStatusText: false,
+    showStatusCounters: true,
+    showCopilotIcon: false,
+    centerConnectButton: false,
+    title: "",
+    subtitle: "",
+    focusable: false,
+    showOnboarding: false,
+    reshowOnboardingOnDisconnect: false,
+    defaultExpanded: false,
+    inputBoxLayout: false
+};
+class AgentsVoiceWidget extends Disposable {
+    constructor(container, callbacks, options = {}) {
+        super();
+        this.container = container;
+        this.callbacks = callbacks;
+        this._isConnected = observableValue(this, false);
+        this._isConnecting = observableValue(this, false);
+        this._isReconnecting = observableValue(this, false);
+        this._voiceState = observableValue(this, "idle");
+        this._expanded = observableValue(this, false);
+        this._workingCount = observableValue(this, 0);
+        this._needsInputCount = observableValue(this, 0);
+        this._doneCount = observableValue(this, 0);
+        this._pendingToolConfirmations = observableValue(this, []);
+        this._speakingSession = observableValue(this, undefined);
+        this._speakingSessionLabel = observableValue(this, undefined);
+        this._sessions = observableValue(this, []);
+        this._sessionGroups = observableValue(this, undefined);
+        this._selectedTargetSession = observableValue(this, undefined);
+        this._transcriptTurns = observableValue(this, []);
+        this._pttKeyLabel = observableValue(this, undefined);
+        this._statusText = observableValue(this, "");
+        this._popoutAvailable = observableValue(this, true);
+        this._feedbackDialogState = observableValue(this, null);
+        this._showOnboarding = observableValue(this, false);
+        this._onboardingPendingConnect = observableValue(this, false);
+        this._shouldShowExpanded = derived(this, reader => this._expanded.read(reader));
+        this._headerComponent = createHeader();
+        this._onboardingComponent = createOnboarding();
+        this._feedbackDialogComponent = createFeedbackDialog();
+        this._voiceBarComponent = createVoiceBar();
+        this._transcriptComponent = this._register(createTranscript());
+        this._inputBoxTranscriptComponent = this._register(createTranscript());
+        this._statusRowsComponent = createStatusRows();
+        this._sessionListComponent = createSessionList();
+        this._options = {
+            ...DEFAULT_OPTIONS,
+            ...options
+        };
+        this._showOnboarding.set(this._options.showOnboarding, undefined);
+        this._expanded.set(this._options.defaultExpanded, undefined);
+        const opts = this._options;
+        const widthStyle = opts.width === "auto" ? "width:100%;position:relative;" : `position:absolute;top:0;left:0;width:${opts.width}px;${opts.inputBoxLayout ? "" : `min-height:${AGENTS_VOICE_WINDOW_DEFAULT_HEIGHT}px;`}`;
+        this._rootDiv = $("div");
+        this._rootDiv.style.cssText = `${widthStyle}display:flex;flex-direction:column;user-select:none;font-family:inherit;font-size:${FONT_SIZE.base};color:var(--vscode-foreground);box-sizing:border-box;margin:0;${opts.inputBoxLayout && opts.draggable ? "-webkit-app-region:drag;" : ""}`;
+        this._glowDiv = $("div");
+        this._glowDiv.style.cssText = "position:absolute;top:0;left:0;right:0;height:50px;pointer-events:none;z-index:0;";
+        this._titleRow = $("div");
+        this._titleRow.style.cssText = "display:flex;align-items:baseline;gap:6px;padding:8px 14px 0;overflow:hidden;white-space:nowrap;position:relative;z-index:1;";
+        if (opts.title) {
+            const titleSpan = $("span");
+            titleSpan.style.cssText = `font-size:${FONT_SIZE.micro};font-weight:700;color:var(--vscode-sideBarSectionHeader-foreground, var(--vscode-foreground));text-transform:uppercase;letter-spacing:0.5px;flex-shrink:0;user-select:none;`;
+            titleSpan.textContent = opts.title;
+            this._titleRow.append(titleSpan);
+            if (opts.subtitle) {
+                const subtitleSpan = $("span");
+                subtitleSpan.style.cssText = `font-size:${FONT_SIZE.micro};font-weight:400;color:var(--vscode-descriptionForeground);overflow:hidden;text-overflow:ellipsis;`;
+                subtitleSpan.textContent = opts.subtitle;
+                this._titleRow.append(subtitleSpan);
+            }
+        }
+        this._contentDiv = $("div");
+        this._contentDiv.style.cssText = "display:flex;flex-direction:column;flex:1;padding:8px 14px 2px;position:relative;z-index:1;";
+        this._statusTextDiv = $("div");
+        this._statusTextDiv.style.cssText = `text-align:center;font-size:${FONT_SIZE.body};font-weight:500;color:var(--vscode-foreground);padding:2px 0;`;
+        this._sessionListWrapper = $("div");
+        this._sessionListWrapper.style.cssText = "display:flex;flex-direction:column;-webkit-app-region:no-drag;overflow:hidden;";
+        this._sessionListWrapper.append(this._sessionListComponent.element);
+        this._expandSpacer = $("div");
+        this._expandSpacer.style.cssText = "flex:1;";
+        this._chevronWrapper = $("div");
+        this._chevronWrapper.role = "button";
+        this._chevronWrapper.tabIndex = 0;
+        this._chevronWrapper.style.cssText = "display:flex;justify-content:center;cursor:pointer;-webkit-app-region:no-drag;";
+        this._chevronIcon = $("span.codicon");
+        this._chevronIcon.style.cssText = `font-size:${FONT_SIZE.iconSm};color:var(--vscode-descriptionForeground);`;
+        this._register(addDisposableListener(this._chevronIcon, "mouseenter", () => {
+            this._chevronIcon.style.color = "var(--vscode-foreground)";
+        }));
+        this._register(addDisposableListener(this._chevronIcon, "mouseleave", () => {
+            this._chevronIcon.style.color = "var(--vscode-descriptionForeground)";
+        }));
+        this._chevronWrapper.append(this._chevronIcon);
+        this._register(addDisposableListener(this._chevronWrapper, "click", e => {
+            e.preventDefault();
+            e.stopPropagation();
+            if (this.callbacks.showSessionsPicker) {
+                this.callbacks.showSessionsPicker();
+            } else {
+                this._expanded.set(!this._expanded.get(), undefined);
+            }
+        }));
+        this._register(addDisposableListener(this._chevronWrapper, "keydown", e => {
+            if (e.key === "Enter" || e.key === " ") {
+                e.preventDefault();
+                this._chevronWrapper.click();
+            }
+        }));
+        if (opts.inputBoxLayout) {
+            const styleEl = $("style");
+            styleEl.textContent = `
+                @property --voice-processing-angle { syntax: '<angle>'; inherits: false; initial-value: 135deg; }
+                @keyframes voice-processing-spin { from { --voice-processing-angle: 135deg; } to { --voice-processing-angle: 495deg; } }
+                @keyframes agents-voice-input-icon-pulse {
+                    0%, 100% { box-shadow: 0 0 4px rgba(var(--agents-voice-input-icon-rgb, 88,166,255), 0.45); }
+                    50% { box-shadow: 0 0 10px rgba(var(--agents-voice-input-icon-rgb, 88,166,255), 0.75); }
+                }
+                .monaco-workbench.monaco-enable-motion .agents-voice-mode-button.agents-voice-mode-active {
+                    animation: agents-voice-input-icon-pulse 1.4s ease-in-out infinite;
+                }
+                .processing { overflow: visible !important; }
+                .processing::before {
+                    content: ''; position: absolute; inset: -1px; border-radius: inherit; padding: 1px;
+                    background: conic-gradient(from var(--voice-processing-angle),
+                        transparent 0deg, rgba(88,166,255,0.9) 20deg, rgba(88,166,255,1) 30deg,
+                        rgba(88,166,255,0.6) 50deg, transparent 90deg, transparent 360deg);
+                    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
+                    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
+                    -webkit-mask-composite: xor; mask-composite: exclude;
+                    animation: voice-processing-spin 3s linear infinite;
+                    pointer-events: none; z-index: 2;
+                }
+                .processing::after {
+                    content: ''; position: absolute; inset: -1px; border-radius: inherit; padding: 2px;
+                    background: conic-gradient(from var(--voice-processing-angle),
+                        transparent 0deg, rgba(88,166,255,0.5) 25deg, rgba(88,166,255,0.3) 50deg, transparent 90deg, transparent 360deg);
+                    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
+                    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
+                    -webkit-mask-composite: xor; mask-composite: exclude;
+                    filter: blur(1.5px); animation: voice-processing-spin 3s linear infinite;
+                    pointer-events: none; z-index: 1;
+                }
+            `;
+            getWindow(this.container).document.head.append(styleEl);
+            this._inputBoxContainer = $("div");
+            this._inputBoxContainer.style.cssText = "box-sizing:border-box;background-color:var(--vscode-input-background);border:1px solid var(--vscode-input-border, transparent);border-radius:var(--vscode-cornerRadius-large, 8px);padding:10px 12px;width:100%;position:relative;min-height:32px;display:flex;align-items:center;-webkit-app-region:no-drag;";
+            this._inputBoxPlaceholder = $("span");
+            this._inputBoxPlaceholder.style.cssText = `font-size:${FONT_SIZE.body};color:var(--vscode-input-placeholderForeground, var(--vscode-descriptionForeground));user-select:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;`;
+            this._inputBoxTranscriptComponent.element.style.width = "100%";
+            this._inputBoxTranscriptComponent.element.style.display = "none";
+            this._inputBoxContainer.append(this._inputBoxPlaceholder, this._inputBoxTranscriptComponent.element);
+            this._inputBoxToolbar = $("div");
+            this._inputBoxToolbar.style.cssText = "display:flex;align-items:center;gap:8px;padding:6px 4px 2px;-webkit-app-region:no-drag;";
+            const toolbarBtn = (className, ariaLabel, title) => {
+                const el = $(`span.codicon.${className}`);
+                el.role = "button";
+                el.tabIndex = 0;
+                el.ariaLabel = ariaLabel;
+                el.title = title;
+                el.style.cssText = `font-size:${FONT_SIZE.iconSm};color:var(--vscode-descriptionForeground);cursor:pointer;-webkit-app-region:no-drag;padding:2px;`;
+                this._register(addDisposableListener(el, "mouseenter", () => {
+                    el.style.color = "var(--vscode-foreground)";
+                }));
+                this._register(addDisposableListener(el, "mouseleave", () => {
+                    el.style.color = "var(--vscode-descriptionForeground)";
+                }));
+                addKeyboardActivation(el);
+                return el;
+            };
+            this._inputBoxMicBtn = $("span.codicon.codicon-voice-mode.agents-voice-mode-button");
+            this._inputBoxMicBtn.role = "button";
+            this._inputBoxMicBtn.tabIndex = 0;
+            this._inputBoxMicBtn.ariaLabel = ( localize(4789, "Push to talk (Space)"));
+            this._inputBoxMicBtn.title = ( localize(4789, "Push to talk (Space)"));
+            this._inputBoxMicBtn.style.cssText = `font-size:${FONT_SIZE.iconMd};cursor:pointer;-webkit-app-region:no-drag;border-radius:4px;padding:2px;`;
+            this._inputBoxConnIndicator = toolbarBtn("codicon-debug-connected", ( localize(4790, "Disconnect")), ( localize(4790, "Disconnect")));
+            this._inputBoxGearBtn = toolbarBtn("codicon-gear", ( localize(4791, "Configure keybinding")), ( localize(4791, "Configure keybinding")));
+            this._inputBoxFeedbackBtn = toolbarBtn("codicon-feedback", ( localize(4792, "Send feedback")), ( localize(4792, "Send feedback")));
+            this._inputBoxSessionsBtn = toolbarBtn("codicon-list-tree", ( localize(4793, "Sessions")), ( localize(4793, "Sessions")));
+            this._register(addDisposableListener(this._inputBoxSessionsBtn, "click", e => {
+                e.preventDefault();
+                e.stopPropagation();
+                this._expanded.set(!this._expanded.get(), undefined);
+            }));
+            this._inputBoxCloseBtn = toolbarBtn("codicon-chrome-minimize", ( localize(4794, "Minimize")), ( localize(4794, "Minimize")));
+            const toolbarSpacer = $("span");
+            toolbarSpacer.style.flex = "1";
+            this._inputBoxToolbar.append(
+                this._inputBoxMicBtn,
+                this._inputBoxConnIndicator,
+                this._inputBoxGearBtn,
+                toolbarSpacer,
+                this._inputBoxFeedbackBtn,
+                this._inputBoxSessionsBtn,
+                this._inputBoxCloseBtn
+            );
+        }
+        if (opts.inputBoxLayout) {
+            this._contentDiv.append(
+                this._onboardingComponent.element,
+                this._feedbackDialogComponent.element,
+                this._inputBoxToolbar,
+                this._transcriptComponent.element,
+                this._sessionListWrapper,
+                this._statusRowsComponent.element,
+                this._inputBoxContainer
+            );
+        } else {
+            this._contentDiv.append(
+                this._onboardingComponent.element,
+                this._headerComponent.element,
+                this._voiceBarComponent.element,
+                this._feedbackDialogComponent.element,
+                this._statusTextDiv,
+                this._transcriptComponent.element,
+                this._statusRowsComponent.element,
+                this._sessionListWrapper,
+                this._expandSpacer,
+                this._chevronWrapper
+            );
+        }
+        this._rootDiv.append(this._glowDiv, this._titleRow, this._contentDiv);
+        this.container.append(this._rootDiv);
+        if (this._options.focusable) {
+            this.container.tabIndex = 0;
+            const win = getWindow(this.container);
+            let pttKeyCode;
+            let lastKeyDownCode;
+            const onDocKeydown = e => {
+                lastKeyDownCode = e.code;
+            };
+            win.document.addEventListener("keydown", onDocKeydown, true);
+            this._register(
+                toDisposable(() => win.document.removeEventListener("keydown", onDocKeydown, true))
+            );
+            this._register(addDisposableListener(this.container, "keydown", e => {
+                if (!_isTextInput(e.target) && pttKeyCode && e.code === pttKeyCode) {
+                    e.preventDefault();
+                }
+            }));
+            this._register(addDisposableListener(this.container, "keyup", e => {
+                if (!_isTextInput(e.target) && pttKeyCode && e.code === pttKeyCode) {
+                    e.preventDefault();
+                    pttKeyCode = undefined;
+                    this.callbacks.pttUp();
+                }
+            }));
+            const origPttDown = this.callbacks.pttDown;
+            this.callbacks.pttDown = () => {
+                pttKeyCode = lastKeyDownCode;
+                origPttDown.call(this.callbacks);
+            };
+            const onDocPointerUp = () => this.callbacks.pttUp();
+            win.document.addEventListener("pointerup", onDocPointerUp);
+            this._register(
+                toDisposable(() => win.document.removeEventListener("pointerup", onDocPointerUp))
+            );
+        }
+        const pttChannel = ( new BroadcastChannel("vscode-ptt"));
+        pttChannel.onmessage = e => {
+            if (e.data === "down") {
+                this.callbacks.pttDown();
+            }
+            if (e.data === "up") {
+                this.callbacks.pttUp();
+            }
+        };
+        this._register(toDisposable(() => pttChannel.close()));
+        const renderDisposable = autorun(reader => {
+            this._updateDOM(reader);
+            getWindow(this.container).requestAnimationFrame(() => {
+                this.callbacks.onResize();
+            });
+        });
+        this._register(renderDisposable);
+        this._register(toDisposable(() => clearNode(this.container)));
+        let sawConnecting = false;
+        let failureCheckPending = false;
+        let disposed = false;
+        const onboardingConnectDisposable = autorun(reader => {
+            if (!this._onboardingPendingConnect.read(reader)) {
+                sawConnecting = false;
+                return;
+            }
+            if (this._isConnected.read(reader)) {
+                this._onboardingPendingConnect.set(false, undefined);
+                sawConnecting = false;
+                this._showOnboarding.set(false, undefined);
+                this.callbacks.onOnboardingCompleted?.();
+                return;
+            }
+            if (this._isConnecting.read(reader)) {
+                sawConnecting = true;
+                return;
+            }
+            if (sawConnecting && !failureCheckPending) {
+                failureCheckPending = true;
+                queueMicrotask(() => {
+                    failureCheckPending = false;
+                    if (disposed) {
+                        return;
+                    }
+                    if (this._onboardingPendingConnect.read(undefined) && !this._isConnected.read(undefined) && !this._isConnecting.read(undefined)) {
+                        this._onboardingPendingConnect.set(false, undefined);
+                        sawConnecting = false;
+                    }
+                });
+            }
+        });
+        this._register(toDisposable(() => {
+            disposed = true;
+        }));
+        this._register(onboardingConnectDisposable);
+        if (this._options.reshowOnboardingOnDisconnect) {
+            const reshowDisposable = autorun(reader => {
+                const connected = this._isConnected.read(reader);
+                const connecting = this._isConnecting.read(reader);
+                const reconnecting = this._isReconnecting.read(reader);
+                const pendingConnect = this._onboardingPendingConnect.read(reader);
+                if (!connected && !connecting && !reconnecting && !pendingConnect) {
+                    if (!this._showOnboarding.read(reader)) {
+                        this._showOnboarding.set(true, undefined);
+                    }
+                }
+            });
+            this._register(reshowDisposable);
+        }
+        this._startWaveformAnimation();
+        this._register(toDisposable(() => this._stopWaveformAnimation()));
+    }
+    _updateDOM(reader) {
+        if (this._options.inputBoxLayout) {
+            this._updateDOMInputBoxLayout(reader);
+        } else {
+            this._updateDOMClassicLayout(reader);
+        }
+    }
+    _updateDOMInputBoxLayout(reader) {
+        const onboarding = this._showOnboarding.read(reader);
+        const voiceState = this._voiceState.read(reader);
+        const isConnected = this._isConnected.read(reader);
+        const isConnecting = this._isConnecting.read(reader);
+        const isReconnecting = this._isReconnecting.read(reader);
+        const showConnected = isConnected || isReconnecting;
+        const opts = this._options;
+        const showExpanded = this._shouldShowExpanded.read(reader) && opts.showExpandChevron;
+        const baseWidth = typeof opts.width === "number" ? opts.width : AGENTS_VOICE_WINDOW_DEFAULT_WIDTH;
+        this._rootDiv.style.width = `${baseWidth}px`;
+        this._titleRow.style.display = (onboarding || !opts.title) ? "none" : "flex";
+        if (onboarding) {
+            this._onboardingComponent.element.style.display = "";
+            this._feedbackDialogComponent.element.style.display = "none";
+            this._inputBoxContainer.style.display = "none";
+            this._transcriptComponent.element.style.display = "none";
+            this._statusRowsComponent.element.style.display = "none";
+            this._sessionListWrapper.style.display = "none";
+            this._inputBoxToolbar.style.display = "none";
+            this._onboardingComponent.update({
+                pttKeyLabel: this._pttKeyLabel.read(reader),
+                isConnecting: this._onboardingPendingConnect.read(reader) || isConnecting,
+                onGetStarted: e => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    this._dismissOnboarding(true);
+                },
+                onOpenPttKeySettings: e => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    this.callbacks.openPttKeySettings();
+                },
+                onOpenPopout: this.callbacks.openPopout ? e => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    this.callbacks.openPopout?.();
+                } : undefined
+            });
+            return;
+        }
+        this._onboardingComponent.element.style.display = "none";
+        const feedbackState = this._feedbackDialogState.read(reader);
+        if (feedbackState) {
+            this._feedbackDialogComponent.element.style.display = "";
+            this._feedbackDialogComponent.update({
+                onSubmit: text => this._submitFeedback(text),
+                onCancel: () => {
+                    this._feedbackDialogState.set(null, undefined);
+                }
+            }, feedbackState);
+            this._inputBoxContainer.style.display = "none";
+            this._transcriptComponent.element.style.display = "none";
+            this._statusRowsComponent.element.style.display = "none";
+            this._sessionListWrapper.style.display = "none";
+            this._inputBoxToolbar.style.display = "none";
+            return;
+        }
+        this._feedbackDialogComponent.element.style.display = "none";
+        this._inputBoxContainer.style.display = "flex";
+        const transcriptTurns = this._transcriptTurns.read(reader);
+        const hasTranscript = ( transcriptTurns.some(t => t.text.length > 0 || (t.speaker === "user" && t.isPartial)));
+        if (!showConnected || (voiceState !== "listening" && voiceState !== "speaking")) {
+            this._inputBoxContainer.style.borderColor = "var(--vscode-input-border, transparent)";
+            this._inputBoxContainer.style.boxShadow = "none";
+        }
+        this._inputBoxContainer.classList.toggle("processing", voiceState === "processing");
+        if (hasTranscript) {
+            if (showExpanded) {
+                this._transcriptComponent.element.style.display = "";
+                this._transcriptComponent.element.style.padding = "8px 12px";
+                this._transcriptComponent.element.style.borderBottom = "1px solid var(--vscode-widget-border, var(--vscode-input-border, transparent))";
+                this._transcriptComponent.update({
+                    turns: transcriptTurns,
+                    chatStyle: true
+                });
+                this._inputBoxPlaceholder.style.display = "none";
+                this._inputBoxTranscriptComponent.element.style.display = "none";
+            } else {
+                this._inputBoxPlaceholder.style.display = "none";
+                this._transcriptComponent.element.style.display = "none";
+                this._transcriptComponent.element.style.padding = "";
+                this._transcriptComponent.element.style.borderBottom = "";
+                this._inputBoxTranscriptComponent.element.style.display = "";
+                this._inputBoxTranscriptComponent.update({
+                    turns: transcriptTurns,
+                    chatStyle: true,
+                    scrollToTop: true
+                });
+            }
+        } else {
+            this._inputBoxPlaceholder.style.display = "";
+            this._inputBoxTranscriptComponent.element.style.display = "none";
+            this._transcriptComponent.element.style.display = "none";
+            const keyLabel = this._pttKeyLabel.read(reader);
+            if (showConnected) {
+                this._inputBoxPlaceholder.textContent = ( localize(4795, "Listening"));
+            } else if (keyLabel) {
+                this._inputBoxPlaceholder.textContent = ( localize(4796, "Hold {0} to talk", keyLabel));
+            } else {
+                this._inputBoxPlaceholder.textContent = ( localize(4797, "Click voice mode to talk"));
+            }
+        }
+        if (!showExpanded) {
+            this._statusRowsComponent.element.style.display = "none";
+            this._sessionListWrapper.style.display = "none";
+        } else {
+            this._statusRowsComponent.element.style.display = "none";
+            this._sessionListWrapper.style.display = "";
+            this._sessionListWrapper.style.maxHeight = "200px";
+            this._sessionListWrapper.style.overflowY = "auto";
+            this._sessionListWrapper.style.scrollbarWidth = "none";
+            this._sessionListComponent.update({
+                sessions: this._sessions.read(reader),
+                groups: this._sessionGroups.read(reader),
+                selectedTarget: this._selectedTargetSession.read(reader),
+                onOpenSession: r => this.callbacks.openSession(r),
+                onStopSession: r => this.callbacks.stopSession(r),
+                onCancelSession: r => this.callbacks.cancelSession(r),
+                onSelectTarget: r => {
+                    this._selectedTargetSession.set(r, undefined);
+                    this.callbacks.selectTargetSession(r);
+                },
+                onNewSession: () => this.callbacks.newSessionAsTarget()
+            });
+        }
+        this._inputBoxToolbar.style.display = "flex";
+        this._inputBoxMicBtn.style.display = "";
+        const keyLabel = this._pttKeyLabel.read(reader);
+        const micTooltip = keyLabel ? ( localize(4798, "Push to talk ({0})", keyLabel)) : ( localize(4799, "Push to talk"));
+        this._inputBoxMicBtn.title = micTooltip;
+        this._inputBoxMicBtn.ariaLabel = micTooltip;
+        const micColor = voiceState === "error" ? "var(--vscode-editorError-foreground)" : voiceState === "listening" ? "var(--vscode-editorInfo-foreground)" : voiceState === "speaking" ? "var(--vscode-agentsVoice-speakingForeground)" : "var(--vscode-descriptionForeground)";
+        this._inputBoxMicBtn.style.color = micColor;
+        const micIsActive = voiceState === "listening" || voiceState === "speaking";
+        this._inputBoxMicBtn.classList.toggle("agents-voice-mode-active", micIsActive);
+        this._inputBoxMicBtn.style.setProperty(
+            "--agents-voice-input-icon-rgb",
+            voiceState === "speaking" ? "163,113,247" : "88,166,255"
+        );
+        this._inputBoxMicBtn.style.borderRadius = "50%";
+        if (!micIsActive) {
+            this._inputBoxMicBtn.style.boxShadow = "none";
+        }
+        this._inputBoxMicBtn.onmousedown = e => {
+            e.preventDefault();
+            this.callbacks.pttDown();
+        };
+        this._inputBoxMicBtn.onmouseup = () => {
+            this.callbacks.pttUp();
+        };
+        this._inputBoxConnIndicator.style.display = showConnected ? "" : "none";
+        this._inputBoxConnIndicator.onclick = e => {
+            e.preventDefault();
+            e.stopPropagation();
+            this.callbacks.disconnect();
+        };
+        this._inputBoxGearBtn.style.display = "";
+        this._inputBoxGearBtn.onclick = e => {
+            e.preventDefault();
+            e.stopPropagation();
+            this.callbacks.openPttKeySettings();
+        };
+        this._inputBoxFeedbackBtn.onclick = e => {
+            e.preventDefault();
+            e.stopPropagation();
+            this._toggleFeedbackDialog();
+        };
+        this._inputBoxSessionsBtn.style.display = "";
+        this._inputBoxSessionsBtn.className = `codicon codicon-${showExpanded ? "chevron-up" : "list-tree"}`;
+        this._inputBoxSessionsBtn.title = showExpanded ? ( localize(4800, "Collapse sessions")) : ( localize(4793, "Sessions"));
+        this._inputBoxCloseBtn.style.display = opts.showClose ? "" : "none";
+        this._inputBoxCloseBtn.onclick = e => {
+            e.preventDefault();
+            e.stopPropagation();
+            this.callbacks.closeWindow();
+        };
+    }
+    _updateDOMClassicLayout(reader) {
+        const onboarding = this._showOnboarding.read(reader);
+        const voiceState = this._voiceState.read(reader);
+        const opts = this._options;
+        const showExpanded = this._shouldShowExpanded.read(reader) && opts.showExpandChevron;
+        this._titleRow.style.display = (onboarding || !opts.title) ? "none" : "flex";
+        if (onboarding) {
+            this._onboardingComponent.element.style.display = "";
+            this._headerComponent.element.style.display = "none";
+            this._voiceBarComponent.element.style.display = "none";
+            this._feedbackDialogComponent.element.style.display = "none";
+            this._statusTextDiv.style.display = "none";
+            this._transcriptComponent.element.style.display = "none";
+            this._statusRowsComponent.element.style.display = "none";
+            this._sessionListWrapper.style.display = "none";
+            this._expandSpacer.style.display = "none";
+            this._chevronWrapper.style.display = "none";
+            this._onboardingComponent.update({
+                pttKeyLabel: this._pttKeyLabel.read(reader),
+                isConnecting: this._onboardingPendingConnect.read(reader) || this._isConnecting.read(reader),
+                onGetStarted: e => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    this._dismissOnboarding(true);
+                },
+                onOpenPttKeySettings: e => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    this.callbacks.openPttKeySettings();
+                },
+                onOpenPopout: this.callbacks.openPopout ? e => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    this.callbacks.openPopout?.();
+                } : undefined
+            });
+        } else {
+            this._onboardingComponent.element.style.display = "none";
+            this._headerComponent.element.style.display = "";
+            const feedbackState = this._feedbackDialogState.read(reader);
+            this._headerComponent.update({
+                copilotIconSrc: this.callbacks.copilotIconSrc,
+                showCopilotIcon: opts.showCopilotIcon,
+                isConnected: this._isConnected.read(reader),
+                isConnecting: this._isConnecting.read(reader),
+                isReconnecting: this._isReconnecting.read(reader),
+                voiceState,
+                draggable: opts.draggable,
+                showClose: opts.showClose,
+                showPopout: !!this.callbacks.openPopout && this._popoutAvailable.read(reader),
+                hideDisconnect: this.callbacks.hideDisconnect,
+                centerConnectButton: opts.centerConnectButton,
+                onMicDown: e => {
+                    e.preventDefault();
+                    this.callbacks.pttDown();
+                },
+                onMicUp: () => {
+                    this.callbacks.pttUp();
+                },
+                onConnectClick: e => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    if (this._isConnecting.get()) {
+                        return;
+                    }
+                    if (this._isConnected.get()) {
+                        this.callbacks.disconnect();
+                    } else {
+                        this.callbacks.connect();
+                    }
+                },
+                onDisconnectClick: e => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    this.callbacks.disconnect();
+                },
+                onCloseClick: e => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    this.callbacks.closeWindow();
+                },
+                onToggleClick: e => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    this._expanded.set(!this._expanded.get(), undefined);
+                },
+                onPttKeyClick: e => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    this.callbacks.openPttKeySettings();
+                },
+                onPopoutClick: e => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    this.callbacks.openPopout?.();
+                },
+                onFeedbackClick: e => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    this._toggleFeedbackDialog();
+                },
+                pttKeyLabel: this._pttKeyLabel.read(reader),
+                expanded: showExpanded
+            });
+            if (feedbackState) {
+                this._voiceBarComponent.element.style.display = "none";
+                this._feedbackDialogComponent.element.style.display = "";
+                this._feedbackDialogComponent.update({
+                    onSubmit: text => this._submitFeedback(text),
+                    onCancel: () => {
+                        this._feedbackDialogState.set(null, undefined);
+                    }
+                }, feedbackState);
+                this._statusTextDiv.style.display = "none";
+                this._transcriptComponent.element.style.display = "none";
+                this._statusRowsComponent.element.style.display = "none";
+                this._sessionListWrapper.style.display = "none";
+                this._expandSpacer.style.display = "none";
+                this._chevronWrapper.style.display = "none";
+            } else {
+                this._feedbackDialogComponent.element.style.display = "none";
+                this._voiceBarComponent.update({
+                    voiceState,
+                    speakingSessionLabel: this._speakingSessionLabel.read(reader),
+                    speakingSession: this._speakingSession.read(reader),
+                    onStopSpeech: () => this.callbacks.stopPlayback()
+                });
+                const statusText = this._statusText.read(reader);
+                const isError = voiceState === "error";
+                if ((opts.showStatusText || isError) && statusText) {
+                    this._statusTextDiv.style.display = "";
+                    this._statusTextDiv.textContent = statusText;
+                    this._statusTextDiv.style.color = isError ? "var(--vscode-editorError-foreground)" : "var(--vscode-foreground)";
+                } else {
+                    this._statusTextDiv.style.display = "none";
+                }
+                this._transcriptComponent.update({
+                    turns: this._transcriptTurns.read(reader)
+                });
+                if (!showExpanded) {
+                    this._statusRowsComponent.element.style.display = "";
+                    this._statusRowsComponent.update({
+                        workingCount: this._workingCount.read(reader),
+                        needsInputCount: this._needsInputCount.read(reader),
+                        doneCount: this._doneCount.read(reader),
+                        showCounters: opts.showStatusCounters,
+                        speakingSessionLabel: this._speakingSessionLabel.read(reader),
+                        speakingSessionResource: this._speakingSession.read(reader),
+                        pendingToolConfirmations: this._pendingToolConfirmations.read(reader),
+                        onOpenSession: r => this.callbacks.openSession(r)
+                    });
+                    this._sessionListWrapper.style.display = "none";
+                } else {
+                    this._statusRowsComponent.element.style.display = "none";
+                    this._sessionListWrapper.style.display = "";
+                    this._sessionListComponent.update({
+                        sessions: this._sessions.read(reader),
+                        groups: this._sessionGroups.read(reader),
+                        selectedTarget: this._selectedTargetSession.read(reader),
+                        onOpenSession: r => this.callbacks.openSession(r),
+                        onStopSession: r => this.callbacks.stopSession(r),
+                        onCancelSession: r => this.callbacks.cancelSession(r),
+                        onSelectTarget: r => {
+                            this._selectedTargetSession.set(r, undefined);
+                            this.callbacks.selectTargetSession(r);
+                        },
+                        onNewSession: () => this.callbacks.newSessionAsTarget()
+                    });
+                }
+                this._expandSpacer.style.display = "";
+                this._chevronWrapper.style.display = opts.showExpandChevron ? "flex" : "none";
+                this._chevronWrapper.title = showExpanded ? "Collapse sessions" : "Expand sessions";
+                this._chevronIcon.className = `codicon codicon-${showExpanded ? "chevron-up" : "chevron-down"}`;
+            }
+        }
+    }
+    setConnected(connected) {
+        this._isConnected.set(connected, undefined);
+    }
+    setConnecting(connecting) {
+        this._isConnecting.set(connecting, undefined);
+    }
+    setReconnecting(reconnecting) {
+        this._isReconnecting.set(reconnecting, undefined);
+    }
+    setVoiceState(state) {
+        this._voiceState.set(state, undefined);
+    }
+    setStatusCounts(working, needsInput, done) {
+        this._workingCount.set(working, undefined);
+        this._needsInputCount.set(needsInput, undefined);
+        this._doneCount.set(done, undefined);
+    }
+    setPendingToolConfirmations(confirmations) {
+        this._pendingToolConfirmations.set(confirmations, undefined);
+    }
+    setSpeakingSession(session, label) {
+        this._speakingSession.set(session, undefined);
+        this._speakingSessionLabel.set(label, undefined);
+    }
+    setSessions(sessions) {
+        this._sessions.set(sessions, undefined);
+    }
+    setSelectedTargetSession(resource) {
+        this._selectedTargetSession.set(resource, undefined);
+    }
+    setSessionGroups(groups) {
+        this._sessionGroups.set(groups, undefined);
+    }
+    setPttKeyLabel(label) {
+        this._pttKeyLabel.set(label, undefined);
+    }
+    setTranscriptTurns(turns) {
+        this._transcriptTurns.set(turns, undefined);
+    }
+    setStatusText(text) {
+        this._statusText.set(text, undefined);
+    }
+    setPopoutAvailable(available) {
+        this._popoutAvailable.set(available, undefined);
+    }
+    _toggleFeedbackDialog() {
+        if (this._feedbackDialogState.get()) {
+            this._feedbackDialogState.set(null, undefined);
+        } else {
+            this._showOnboarding.set(false, undefined);
+            this._feedbackDialogState.set({
+                isSubmitting: false,
+                submitted: false
+            }, undefined);
+        }
+    }
+    _dismissOnboarding(connect = false) {
+        if (connect) {
+            if (this._isConnected.get()) {
+                this._showOnboarding.set(false, undefined);
+                this.callbacks.onOnboardingCompleted?.();
+                return;
+            }
+            if (!this._isConnecting.get() && !this._onboardingPendingConnect.get()) {
+                this._onboardingPendingConnect.set(true, undefined);
+                this.callbacks.connect();
+            }
+        } else {
+            this._showOnboarding.set(false, undefined);
+            this.callbacks.onOnboardingCompleted?.();
+        }
+    }
+    dismissOnboarding() {
+        this._onboardingPendingConnect.set(false, undefined);
+        if (this._showOnboarding.get()) {
+            this._showOnboarding.set(false, undefined);
+        }
+    }
+    _submitFeedback(text) {
+        this._feedbackDialogState.set({
+            isSubmitting: true,
+            submitted: false
+        }, undefined);
+        this.callbacks.submitFeedback(text).then(result => {
+            if (result.ok) {
+                this._feedbackDialogState.set({
+                    isSubmitting: false,
+                    submitted: true
+                }, undefined);
+                setTimeout(() => {
+                    this._feedbackDialogState.set(null, undefined);
+                }, 3000);
+            } else {
+                this._feedbackDialogState.set({
+                    isSubmitting: false,
+                    submitted: false,
+                    error: result.error ?? ( localize(4801, "Failed to submit"))
+                }, undefined);
+            }
+        });
+    }
+    _startWaveformAnimation() {
+        if (this._animationFrameId !== undefined) {
+            return;
+        }
+        const animate = () => {
+            this._animationFrameId = getWindow(this.container).requestAnimationFrame(animate);
+            const onboarding = this._showOnboarding.get();
+            const voiceState = this._voiceState.get();
+            const glowActive = onboarding || voiceState === "speaking" || voiceState === "listening";
+            if (!glowActive) {
+                this._glowDiv.style.display = "none";
+                if (this._inputBoxContainer) {
+                    this._inputBoxContainer.style.borderColor = "var(--vscode-input-border, transparent)";
+                    this._inputBoxContainer.style.boxShadow = "none";
+                }
+                if (this._inputBoxMicBtn) {
+                    this._inputBoxMicBtn.style.boxShadow = "none";
+                }
+                return;
+            }
+            const analyser = this.callbacks.getAnalyserNode();
+            let intensity;
+            if (onboarding) {
+                intensity = 0.6;
+            } else if (!analyser) {
+                intensity = 0.3;
+            } else {
+                const dataArray = ( new Uint8Array(analyser.frequencyBinCount));
+                analyser.getByteFrequencyData(dataArray);
+                let sum = 0;
+                for (let i = 0; i < dataArray.length; i++) {
+                    sum += dataArray[i];
+                }
+                intensity = Math.min(1, (sum / dataArray.length) / 80);
+            }
+            if (this._inputBoxContainer) {
+                const r = (voiceState === "speaking") ? "163,113,247" : "88,166,255";
+                const borderAlpha = 0.4 + intensity * 0.5;
+                const shadowSpread = 4 + intensity * 12;
+                const shadowAlpha = 0.15 + intensity * 0.35;
+                this._inputBoxContainer.style.borderColor = `rgba(${r},${borderAlpha})`;
+                this._inputBoxContainer.style.boxShadow = `0 0 ${shadowSpread}px rgba(${r},${shadowAlpha}), inset 0 0 ${shadowSpread * 0.4}px rgba(${r},${shadowAlpha * 0.3})`;
+            }
+            if (this._inputBoxMicBtn) {
+                const iconGlowActive = voiceState === "listening" || voiceState === "speaking";
+                if (iconGlowActive) {
+                    const r = voiceState === "speaking" ? "163,113,247" : "88,166,255";
+                    const shadowSpread = 3 + intensity * 8;
+                    const shadowAlpha = 0.2 + intensity * 0.45;
+                    this._inputBoxMicBtn.style.boxShadow = `0 0 ${shadowSpread}px rgba(${r},${shadowAlpha})`;
+                } else {
+                    this._inputBoxMicBtn.style.boxShadow = "none";
+                }
+            }
+            this._glowDiv.style.display = "";
+            const baseOpacity = 0.15 + intensity * 0.4;
+            const r = (onboarding || voiceState === "speaking") ? "163,113,247" : "88,166,255";
+            this._glowDiv.style.background = `radial-gradient(ellipse 40% 70% at 50% 0%, rgba(${r},${baseOpacity}) 0%, transparent 100%), radial-gradient(ellipse 70% 100% at 50% 0%, rgba(${r},${baseOpacity * 0.4}) 0%, transparent 100%)`;
+        };
+        this._animationFrameId = getWindow(this.container).requestAnimationFrame(animate);
+    }
+    _stopWaveformAnimation() {
+        if (this._animationFrameId !== undefined) {
+            getWindow(this.container).cancelAnimationFrame(this._animationFrameId);
+            this._animationFrameId = undefined;
+        }
+    }
+}
+function _isTextInput(target) {
+    if (!target || typeof target.tagName !== "string") {
+        return false;
+    }
+    const el = target;
+    const tag = el.tagName;
+    if (tag === "TEXTAREA" || tag === "INPUT") {
+        return true;
+    }
+    return el.isContentEditable === true;
+}
+
+export { AgentsVoiceWidget };