Add a way to stop TTS (#1787)

Author: cte

src/core/webview/ClineProvider.ts

@@ -41,7 +41,7 @@ import { BrowserSession } from "../../services/browser/BrowserSession"
 import { discoverChromeInstances } from "../../services/browser/browserDiscovery"
 import { fileExistsAtPath } from "../../utils/fs"
 import { playSound, setSoundEnabled, setSoundVolume } from "../../utils/sound"
-import { playTts, setTtsEnabled, setTtsSpeed } from "../../utils/tts"
+import { playTts, setTtsEnabled, setTtsSpeed, stopTts } from "../../utils/tts"
 import { singleCompletionHandler } from "../../utils/single-completion-handler"
 import { searchCommits } from "../../utils/git"
 import { getDiffStrategy } from "../diff/DiffStrategy"
@@ -1281,9 +1281,15 @@ export class ClineProvider extends EventEmitter<ClineProviderEvents> implements
 						break
 					case "playTts":
 						if (message.text) {
-							playTts(message.text)
+							playTts(message.text, {
+								onStart: () => this.postMessageToWebview({ type: "ttsStart", text: message.text }),
+								onStop: () => this.postMessageToWebview({ type: "ttsStop", text: message.text }),
+							})
 						}
 						break
+					case "stopTts":
+						stopTts()
+						break
 					case "diffEnabled":
 						const diffEnabled = message.bool ?? true
 						await this.updateGlobalState("diffEnabled", diffEnabled)

src/shared/ExtensionMessage.ts

@@ -54,6 +54,8 @@ export interface ExtensionMessage {
 		| "browserToolEnabled"
 		| "browserConnectionResult"
 		| "remoteBrowserEnabled"
+		| "ttsStart"
+		| "ttsStop"
 	text?: string
 	action?:
 		| "chatButtonClicked"

src/shared/WebviewMessage.ts

@@ -52,6 +52,7 @@ export interface WebviewMessage {
 		| "alwaysAllowSubtasks"
 		| "playSound"
 		| "playTts"
+		| "stopTts"
 		| "soundEnabled"
 		| "ttsEnabled"
 		| "ttsSpeed"

src/utils/tts.ts

@@ -1,75 +1,81 @@
-import * as vscode from "vscode"
+interface Say {
+	speak: (text: string, voice?: string, speed?: number, callback?: (err?: string) => void) => void
+	stop: () => void
+}
+
+type PlayTtsOptions = {
+	onStart?: () => void
+	onStop?: () => void
+}
+
+type QueueItem = {
+	message: string
+	options: PlayTtsOptions
+}
 
 let isTtsEnabled = false
+
+export const setTtsEnabled = (enabled: boolean) => (isTtsEnabled = enabled)
+
 let speed = 1.0
-let isSpeaking = false
-const utteranceQueue: string[] = []
-
-/**
- * Set tts configuration
- * @param enabled boolean
- */
-export const setTtsEnabled = (enabled: boolean): void => {
-	isTtsEnabled = enabled
+
+export const setTtsSpeed = (newSpeed: number) => (speed = newSpeed)
+
+let sayInstance: Say | undefined = undefined
+let queue: QueueItem[] = []
+
+export const playTts = async (message: string, options: PlayTtsOptions = {}) => {
+	if (!isTtsEnabled) {
+		return
+	}
+
+	try {
+		queue.push({ message, options })
+		await processQueue()
+	} catch (error) {}
 }
 
-/**
- * Set tts speed
- * @param speed number
- */
-export const setTtsSpeed = (newSpeed: number): void => {
-	speed = newSpeed
+export const stopTts = () => {
+	sayInstance?.stop()
+	sayInstance = undefined
+	queue = []
 }
 
-/**
- * Process the next item in the utterance queue
- */
 const processQueue = async (): Promise<void> => {
-	if (!isTtsEnabled || isSpeaking || utteranceQueue.length === 0) {
+	if (!isTtsEnabled || sayInstance) {
+		return
+	}
+
+	const item = queue.shift()
+
+	if (!item) {
 		return
 	}
 
 	try {
-		isSpeaking = true
-		const nextUtterance = utteranceQueue.shift()!
-		const say = require("say")
+		const { message: nextUtterance, options } = item
 
-		// Wrap say.speak in a promise to handle completion
 		await new Promise<void>((resolve, reject) => {
-			say.speak(nextUtterance, null, speed, (err: Error) => {
+			const say: Say = require("say")
+			sayInstance = say
+			options.onStart?.()
+
+			say.speak(nextUtterance, undefined, speed, (err) => {
+				options.onStop?.()
+
 				if (err) {
-					reject(err)
+					reject(new Error(err))
 				} else {
 					resolve()
 				}
+
+				sayInstance = undefined
 			})
 		})
 
-		isSpeaking = false
-		// Process next item in queue if any
 		await processQueue()
 	} catch (error: any) {
-		isSpeaking = false
-		//vscode.window.showErrorMessage(error.message)
-		// Try to continue with next item despite error
-		await processQueue()
-	}
-}
-
-/**
- * Queue a tts message to be spoken
- * @param message string
- * @return void
- */
-export const playTts = async (message: string): Promise<void> => {
-	if (!isTtsEnabled) {
-		return
-	}
-
-	try {
-		utteranceQueue.push(message)
+		sayInstance = undefined
 		await processQueue()
-	} catch (error: any) {
-		//vscode.window.showErrorMessage(error.message)
 	}
 }