Add speed config option to text-to-speech

Author: heyseth

src/core/webview/ClineProvider.ts

@@ -32,7 +32,7 @@ import { McpServerManager } from "../../services/mcp/McpServerManager"
 import { ShadowCheckpointService } from "../../services/checkpoints/ShadowCheckpointService"
 import { fileExistsAtPath } from "../../utils/fs"
 import { playSound, setSoundEnabled, setSoundVolume } from "../../utils/sound"
-import { playTts, setTtsEnabled } from "../../utils/tts"
+import { playTts, setTtsEnabled, setTtsSpeed } from "../../utils/tts"
 import { singleCompletionHandler } from "../../utils/single-completion-handler"
 import { searchCommits } from "../../utils/git"
 import { getDiffStrategy } from "../diff/DiffStrategy"
@@ -1252,6 +1252,12 @@ export class ClineProvider implements vscode.WebviewViewProvider {
 						setTtsEnabled(ttsEnabled) // Add this line to update the tts utility
 						await this.postStateToWebview()
 						break
+					case "ttsSpeed":
+						const ttsSpeed = message.value ?? 1.0
+						await this.updateGlobalState("ttsSpeed", ttsSpeed)
+						setTtsSpeed(ttsSpeed)
+						await this.postStateToWebview()
+						break
 					case "playTts":
 						if (message.text) {
 							playTts(message.text)
@@ -2196,6 +2202,7 @@ export class ClineProvider implements vscode.WebviewViewProvider {
 			alwaysAllowModeSwitch,
 			soundEnabled,
 			ttsEnabled,
+			ttsSpeed,
 			diffEnabled,
 			enableCheckpoints,
 			checkpointStorage,
@@ -2252,6 +2259,7 @@ export class ClineProvider implements vscode.WebviewViewProvider {
 				.sort((a: HistoryItem, b: HistoryItem) => b.ts - a.ts),
 			soundEnabled: soundEnabled ?? false,
 			ttsEnabled: ttsEnabled ?? false,
+			ttsSpeed: ttsSpeed ?? 1.0,
 			diffEnabled: diffEnabled ?? true,
 			enableCheckpoints: enableCheckpoints ?? true,
 			checkpointStorage: checkpointStorage ?? "task",
@@ -2408,6 +2416,7 @@ export class ClineProvider implements vscode.WebviewViewProvider {
 			allowedCommands: stateValues.allowedCommands,
 			soundEnabled: stateValues.soundEnabled ?? false,
 			ttsEnabled: stateValues.ttsEnabled ?? false,
+			ttsSpeed: stateValues.ttsSpeed ?? 1.0,
 			diffEnabled: stateValues.diffEnabled ?? true,
 			enableCheckpoints: stateValues.enableCheckpoints ?? true,
 			checkpointStorage: stateValues.checkpointStorage ?? "task",

src/shared/ExtensionMessage.ts

@@ -117,6 +117,7 @@ export interface ExtensionState {
 	allowedCommands?: string[]
 	soundEnabled?: boolean
 	ttsEnabled?: boolean
+	ttsSpeed?: number
 	soundVolume?: number
 	diffEnabled?: boolean
 	enableCheckpoints: boolean

src/shared/WebviewMessage.ts

@@ -52,6 +52,7 @@ export interface WebviewMessage {
 		| "playTts"
 		| "soundEnabled"
 		| "ttsEnabled"
+		| "ttsSpeed"
 		| "soundVolume"
 		| "diffEnabled"
 		| "enableCheckpoints"

src/shared/globalState.ts

@@ -60,6 +60,7 @@ export const GLOBAL_STATE_KEYS = [
 	"allowedCommands",
 	"soundEnabled",
 	"ttsEnabled",
+	"ttsSpeed",
 	"soundVolume",
 	"diffEnabled",
 	"enableCheckpoints",

src/utils/tts.ts

@@ -1,6 +1,7 @@
 import * as vscode from "vscode"
 
 let isTtsEnabled = false
+let speed = 1.0
 let isSpeaking = false
 const utteranceQueue: string[] = []
 
@@ -12,6 +13,14 @@ export const setTtsEnabled = (enabled: boolean): void => {
 	isTtsEnabled = enabled
 }
 
+/**
+ * Set tts speed
+ * @param speed number
+ */
+export const setTtsSpeed = (newSpeed: number): void => {
+	speed = newSpeed
+}
+
 /**
  * Process the next item in the utterance queue
  */
@@ -27,7 +36,7 @@ const processQueue = async (): Promise<void> => {
 
 		// Wrap say.speak in a promise to handle completion
 		await new Promise<void>((resolve, reject) => {
-			say.speak(nextUtterance, null, null, (err: Error) => {
+			say.speak(nextUtterance, null, speed, (err: Error) => {
 				if (err) {
 					reject(err)
 				} else {

webview-ui/src/components/settings/NotificationSettings.tsx

@@ -8,13 +8,15 @@ import { Section } from "./Section"
 
 type NotificationSettingsProps = HTMLAttributes<HTMLDivElement> & {
 	ttsEnabled?: boolean
+	ttsSpeed?: number
 	soundEnabled?: boolean
 	soundVolume?: number
-	setCachedStateField: SetCachedStateField<"ttsEnabled" | "soundEnabled" | "soundVolume">
+	setCachedStateField: SetCachedStateField<"ttsEnabled" | "ttsSpeed" | "soundEnabled" | "soundVolume">
 }
 
 export const NotificationSettings = ({
 	ttsEnabled,
+	ttsSpeed,
 	soundEnabled,
 	soundVolume,
 	setCachedStateField,
@@ -39,6 +41,31 @@ export const NotificationSettings = ({
 					<p className="text-vscode-descriptionForeground text-sm mt-0">
 						When enabled, Roo will read aloud its responses using text-to-speech.
 					</p>
+					{ttsEnabled && (
+						<div
+							style={{
+								marginLeft: 0,
+								paddingLeft: 10,
+								borderLeft: "2px solid var(--vscode-button-background)",
+							}}>
+							<div style={{ display: "flex", alignItems: "center", gap: "5px" }}>
+								<input
+									type="range"
+									min="0.1"
+									max="2.0"
+									step="0.01"
+									value={ttsSpeed ?? 1.0}
+									onChange={(e) => setCachedStateField("ttsSpeed", parseFloat(e.target.value))}
+									className="h-2 focus:outline-0 w-4/5 accent-vscode-button-background"
+									aria-label="Speed"
+								/>
+								<span style={{ minWidth: "35px", textAlign: "left" }}>
+									{((ttsSpeed ?? 1.0) * 100).toFixed(0)}%
+								</span>
+							</div>
+							<p className="text-vscode-descriptionForeground text-sm mt-1">Speed</p>
+						</div>
+					)}
 				</div>
 				<div>
 					<VSCodeCheckbox

webview-ui/src/components/settings/SettingsView.tsx

@@ -79,6 +79,7 @@ const SettingsView = forwardRef<SettingsViewRef, SettingsViewProps>(({ onDone },
 		screenshotQuality,
 		soundEnabled,
 		ttsEnabled,
+		ttsSpeed,
 		soundVolume,
 		telemetrySetting,
 		terminalOutputLimit,
@@ -168,6 +169,7 @@ const SettingsView = forwardRef<SettingsViewRef, SettingsViewProps>(({ onDone },
 			vscode.postMessage({ type: "browserToolEnabled", bool: browserToolEnabled })
 			vscode.postMessage({ type: "soundEnabled", bool: soundEnabled })
 			vscode.postMessage({ type: "ttsEnabled", bool: ttsEnabled })
+			vscode.postMessage({ type: "ttsSpeed", value: ttsSpeed })
 			vscode.postMessage({ type: "soundVolume", value: soundVolume })
 			vscode.postMessage({ type: "diffEnabled", bool: diffEnabled })
 			vscode.postMessage({ type: "enableCheckpoints", bool: enableCheckpoints })
@@ -392,6 +394,7 @@ const SettingsView = forwardRef<SettingsViewRef, SettingsViewProps>(({ onDone },
 				<div ref={notificationsRef}>
 					<NotificationSettings
 						ttsEnabled={ttsEnabled}
+						ttsSpeed={ttsSpeed}
 						soundEnabled={soundEnabled}
 						soundVolume={soundVolume}
 						setCachedStateField={setCachedStateField}

webview-ui/src/components/settings/__tests__/SettingsView.test.tsx

@@ -106,6 +106,8 @@ const mockPostMessage = (state: any) => {
 				shouldShowAnnouncement: false,
 				allowedCommands: [],
 				alwaysAllowExecute: false,
+				ttsEnabled: false,
+				ttsSpeed: 1.0,
 				soundEnabled: false,
 				soundVolume: 0.5,
 				...state,
@@ -132,6 +134,18 @@ describe("SettingsView - Sound Settings", () => {
 		jest.clearAllMocks()
 	})
 
+	it("initializes with tts disabled by default", () => {
+		renderSettingsView()
+
+		const ttsCheckbox = screen.getByRole("checkbox", {
+			name: /Enable text-to-speech/i,
+		})
+		expect(ttsCheckbox).not.toBeChecked()
+
+		// Speed slider should not be visible when tts is disabled
+		expect(screen.queryByRole("slider", { name: /speed/i })).not.toBeInTheDocument()
+	})
+
 	it("initializes with sound disabled by default", () => {
 		renderSettingsView()
 
@@ -144,6 +158,29 @@ describe("SettingsView - Sound Settings", () => {
 		expect(screen.queryByRole("slider", { name: /volume/i })).not.toBeInTheDocument()
 	})
 
+	it("toggles tts setting and sends message to VSCode", () => {
+		renderSettingsView()
+
+		const ttsCheckbox = screen.getByRole("checkbox", {
+			name: /Enable text-to-speech/i,
+		})
+
+		// Enable tts
+		fireEvent.click(ttsCheckbox)
+		expect(ttsCheckbox).toBeChecked()
+
+		// Click Save to save settings
+		const saveButton = screen.getByText("Save")
+		fireEvent.click(saveButton)
+
+		expect(vscode.postMessage).toHaveBeenCalledWith(
+			expect.objectContaining({
+				type: "ttsEnabled",
+				bool: true,
+			}),
+		)
+	})
+
 	it("toggles sound setting and sends message to VSCode", () => {
 		renderSettingsView()
 
@@ -167,6 +204,21 @@ describe("SettingsView - Sound Settings", () => {
 		)
 	})
 
+	it("shows tts slider when sound is enabled", () => {
+		renderSettingsView()
+
+		// Enable tts
+		const ttsCheckbox = screen.getByRole("checkbox", {
+			name: /Enable text-to-speech/i,
+		})
+		fireEvent.click(ttsCheckbox)
+
+		// Speed slider should be visible
+		const speedSlider = screen.getByRole("slider", { name: /speed/i })
+		expect(speedSlider).toBeInTheDocument()
+		expect(speedSlider).toHaveValue("1.0")
+	})
+
 	it("shows volume slider when sound is enabled", () => {
 		renderSettingsView()
 
@@ -182,6 +234,30 @@ describe("SettingsView - Sound Settings", () => {
 		expect(volumeSlider).toHaveValue("0.5")
 	})
 
+	it("updates speed and sends message to VSCode when slider changes", () => {
+		renderSettingsView()
+
+		// Enable tts
+		const ttsCheckbox = screen.getByRole("checkbox", {
+			name: /Enable text-to-speech/i,
+		})
+		fireEvent.click(ttsCheckbox)
+
+		// Change speed
+		const speedSlider = screen.getByRole("slider", { name: /speed/i })
+		fireEvent.change(speedSlider, { target: { value: "0.75" } })
+
+		// Click Save to save settings
+		const saveButton = screen.getByText("Save")
+		fireEvent.click(saveButton)
+
+		// Verify message sent to VSCode
+		expect(vscode.postMessage).toHaveBeenCalledWith({
+			type: "ttsSpeed",
+			value: 0.75,
+		})
+	})
+
 	it("updates volume and sends message to VSCode when slider changes", () => {
 		renderSettingsView()
 

webview-ui/src/context/ExtensionStateContext.tsx

@@ -38,6 +38,7 @@ export interface ExtensionStateContextType extends ExtensionState {
 	setSoundEnabled: (value: boolean) => void
 	setSoundVolume: (value: number) => void
 	setTtsEnabled: (value: boolean) => void
+	setTtsSpeed: (value: number) => void
 	setDiffEnabled: (value: boolean) => void
 	setEnableCheckpoints: (value: boolean) => void
 	setBrowserViewportSize: (value: string) => void
@@ -114,6 +115,7 @@ export const ExtensionStateContextProvider: React.FC<{ children: React.ReactNode
 		soundEnabled: false,
 		soundVolume: 0.5,
 		ttsEnabled: false,
+		ttsSpeed: 1.0,
 		diffEnabled: false,
 		enableCheckpoints: true,
 		checkpointStorage: "task",
@@ -229,6 +231,7 @@ export const ExtensionStateContextProvider: React.FC<{ children: React.ReactNode
 		filePaths,
 		openedTabs,
 		soundVolume: state.soundVolume,
+		ttsSpeed: state.ttsSpeed,
 		fuzzyMatchThreshold: state.fuzzyMatchThreshold,
 		writeDelayMs: state.writeDelayMs,
 		screenshotQuality: state.screenshotQuality,
@@ -254,6 +257,7 @@ export const ExtensionStateContextProvider: React.FC<{ children: React.ReactNode
 		setSoundEnabled: (value) => setState((prevState) => ({ ...prevState, soundEnabled: value })),
 		setSoundVolume: (value) => setState((prevState) => ({ ...prevState, soundVolume: value })),
 		setTtsEnabled: (value) => setState((prevState) => ({ ...prevState, ttsEnabled: value })),
+		setTtsSpeed: (value) => setState((prevState) => ({ ...prevState, ttsSpeed: value })),
 		setDiffEnabled: (value) => setState((prevState) => ({ ...prevState, diffEnabled: value })),
 		setEnableCheckpoints: (value) => setState((prevState) => ({ ...prevState, enableCheckpoints: value })),
 		setBrowserViewportSize: (value: string) =>