Add terminalTextToSpeech.css for speech-to-text feature

Author: meganrogge

src/vs/workbench/contrib/terminal/browser/media/terminal.css

@@ -565,5 +565,3 @@
 .monaco-workbench .xterm.terminal.hide {
 	visibility: hidden;
 }
-
-

src/vs/workbench/contrib/terminal/browser/media/terminalTextToSpeech.css

@@ -0,0 +1,40 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the MIT License. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+.terminal-speech-to-text {
+	background-color: var(--vscode-terminal-background, var(--vscode-panel-background));
+	padding: 2px;
+	border-radius: 8px;
+	display: flex;
+	align-items: center;
+	white-space: nowrap;
+	z-index: 1000;
+}
+
+.terminal-speech-to-text.codicon.codicon-mic-filled {
+	display: flex;
+	align-items: center;
+	width: 16px;
+	height: 16px;
+}
+
+.terminal-speech-to-text.recording.codicon.codicon-mic-filled {
+	color: var(--vscode-activityBarBadge-background);
+	animation: ani-terminal-speech 1s infinite;
+}
+
+@keyframes ani-terminal-speech {
+	0% {
+		color: var(--vscode-terminalCursor-background);
+	}
+
+	50% {
+		color: var(--vscode-activityBarBadge-background);
+	}
+
+	100% {
+		color: var(--vscode-terminalCursor-background);
+	}
+}

src/vs/workbench/contrib/terminal/browser/terminal.contribution.ts

@@ -8,6 +8,7 @@ import 'vs/css!./media/scrollbar';
 import 'vs/css!./media/widgets';
 import 'vs/css!./media/xterm';
 import 'vs/css!./media/terminal';
+import 'vs/css!./media/terminalTextToSpeech';
 import * as nls from 'vs/nls';
 import { URI } from 'vs/base/common/uri';
 import { CommandsRegistry } from 'vs/platform/commands/common/commands';

src/vs/workbench/contrib/terminal/browser/terminalSpeechToText.ts

@@ -88,6 +88,7 @@ export class TerminalSpeechToTextSession extends Disposable {
 		}));
 	}
 	stop(send?: boolean): void {
+		this._setInactive();
 		if (send) {
 			this._acceptTranscriptionScheduler!.cancel();
 			this._terminalService.activeInstance?.sendText(this._input, false);
@@ -156,10 +157,14 @@ export class TerminalSpeechToTextSession extends Disposable {
 			x: xterm.buffer.active.cursorX ?? 0,
 		});
 		this._decoration?.onRender((e: HTMLElement) => {
-			e.classList.add(...ThemeIcon.asClassNameArray(Codicon.mic));
+			e.classList.add(...ThemeIcon.asClassNameArray(Codicon.micFilled), 'terminal-speech-to-text', 'recording');
 			e.style.transform = 'translate(-5px, -5px)';
 		});
 	}
+
+	private _setInactive(): void {
+		this._decoration?.element?.classList.remove('recording');
+	}
 }