Enhance WebSocket error handling and STT error management

- Update OpenAIWhisperClient to ensure WebSocket event listeners are removed only if initialized.
- Add error handling in ChatTextArea to set and clear STT error state during recording.
- Integrate error display in STTSetupPopover for improved user feedback on STT setup issues.
- Sync optimistic UI state in useSTT hook for immediate feedback on recording actions.

Author: hassoncs

src/services/stt/OpenAIWhisperClient.ts

@@ -197,27 +197,41 @@ export class OpenAIWhisperClient extends EventEmitter {
 
 				const onOpen = () => {
 					clearTimeout(timeout)
-					this.ws!.off("open", onOpen)
-					this.ws!.off("error", onError)
+					if (this.ws) {
+						this.ws.off("open", onOpen)
+						this.ws.off("error", onError)
+					}
 					resolve()
 				}
 
 				const onError = (error: Error) => {
 					clearTimeout(timeout)
-					this.ws!.off("open", onOpen)
-					this.ws!.off("error", onError)
+					if (this.ws) {
+						this.ws.off("open", onOpen)
+						this.ws.off("error", onError)
+					}
 					reject(new Error(`WebSocket connection failed: ${error.message}`))
 				}
 
-				this.ws!.once("open", onOpen)
-				this.ws!.once("error", onError)
+				if (this.ws) {
+					this.ws.once("open", onOpen)
+					this.ws.once("error", onError)
+				} else {
+					reject(new Error("WebSocket not initialized"))
+				}
 			})
 
 			this.isConnecting = false
 			this.reconnectAttempts = 0
 			this.emit("connected")
 		} catch (error) {
 			this.isConnecting = false
+			try {
+				this.ws?.removeAllListeners()
+				if (this.ws?.readyState === WebSocket.OPEN || this.ws?.readyState === WebSocket.CONNECTING) {
+					this.ws?.close()
+				}
+			} catch (_cleanupError) {}
 			this.ws = null
 			throw error
 		}

webview-ui/src/components/chat/ChatTextArea.tsx

@@ -343,6 +343,7 @@ export const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
 			},
 			onError: (error) => {
 				console.error("STT error:", error)
+				setSttError(error)
 				recordingStartStateRef.current = null
 			},
 		})
@@ -382,6 +383,7 @@ export const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
 					afterCursor: inputValue.slice(pos),
 					position: pos,
 				}
+				setSttError(null)
 			}
 		}, [isRecording, inputValue])
 
@@ -475,6 +477,7 @@ export const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
 
 		// kilocode_change start: Popover state for STT setup help
 		const [sttSetupPopoverOpen, setSttSetupPopoverOpen] = useState(false)
+		const [sttError, setSttError] = useState<string | null>(null)
 		const handleMicrophoneClick = useCallback(() => {
 			// If STT is unavailable, open setup popover instead of starting recording
 			if (!speechToTextStatus?.available) {
@@ -485,6 +488,7 @@ export const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
 			if (isRecording) {
 				stopSTT()
 			} else {
+				setSttError(null) // Clear any previous error when starting new recording
 				startSTT(language || "en") // Pass user's language from extension state
 			}
 		}, [isRecording, startSTT, stopSTT, language, speechToTextStatus?.available])
@@ -1760,7 +1764,8 @@ export const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
 							speechToTextStatus={speechToTextStatus}
 							open={sttSetupPopoverOpen}
 							onOpenChange={setSttSetupPopoverOpen}
-							onFfmpegHelpClick={handleFfmpegHelpClick}>
+							onFfmpegHelpClick={handleFfmpegHelpClick}
+							error={sttError}>
 							<MicrophoneButton
 								isRecording={isRecording}
 								onClick={handleMicrophoneClick}

webview-ui/src/components/chat/STTSetupPopover.tsx

@@ -16,18 +16,21 @@ interface STTSetupPopoverProps {
 	open: boolean
 	onOpenChange: (open: boolean) => void
 	onFfmpegHelpClick: () => void
+	error?: string | null
 }
 
 interface STTSetupPopoverContentProps {
 	reason?: "openaiKeyMissing" | "ffmpegNotInstalled"
 	onFfmpegHelpClick: () => void
 	onOpenChange?: (open: boolean) => void
+	error?: string | null
 }
 
 export const STTSetupPopoverContent: React.FC<STTSetupPopoverContentProps> = ({
 	reason,
 	onFfmpegHelpClick,
 	onOpenChange,
+	error,
 }) => {
 	const { t } = useTranslation()
 	const docsUrl = buildDocLink("features/experimental/voice-transcription", "stt_setup")
@@ -59,6 +62,18 @@ export const STTSetupPopoverContent: React.FC<STTSetupPopoverContentProps> = ({
 				/>
 			</p>
 
+			{error && (
+				<div
+					className="my-0 mb-3 p-2 rounded text-sm border"
+					style={{
+						backgroundColor: "var(--vscode-inputValidation-errorBackground, rgba(255, 0, 0, 0.1))",
+						borderColor: "var(--vscode-inputValidation-errorBorder, #ff0000)",
+						color: "var(--vscode-errorForeground, #ff0000)",
+					}}>
+					<strong>Error:</strong> {error}
+				</div>
+			)}
+
 			<ul className="my-0 mb-0 list-disc list-inside text-sm text-vscode-descriptionForeground space-y-1">
 				{reason === "openaiKeyMissing" || !reason ? (
 					<li>{t("kilocode:speechToText.setupPopover.openAiReason")}</li>
@@ -94,6 +109,7 @@ export const STTSetupPopover: React.FC<STTSetupPopoverProps> = ({
 	open,
 	onOpenChange,
 	onFfmpegHelpClick,
+	error,
 }) => {
 	const portalContainer = useRooPortal("roo-portal")
 
@@ -120,6 +136,7 @@ export const STTSetupPopover: React.FC<STTSetupPopoverProps> = ({
 					reason={reason}
 					onFfmpegHelpClick={onFfmpegHelpClick}
 					onOpenChange={onOpenChange}
+					error={error}
 				/>
 			</PopoverContent>
 		</Popover>

webview-ui/src/hooks/useSTT.ts

@@ -92,6 +92,7 @@ export function useSTT(options: UseSTTOptions = {}): UseSTTReturn {
 					if (msg.sessionId !== sessionIdRef.current) return
 
 					setRealIsRecording(false)
+					setOptimisticIsRecording(false) // Immediately sync optimistic state on stop
 					setVolume(0)
 
 					if (msg.reason === "completed") {