feat(chat): add native composer dictation

Author: urjitc

src/features/workspaces/components/ai-chat/AiChatPromptInput.tsx

@@ -1,4 +1,4 @@
-import { Bug, Plus } from "lucide-react";
+import { Bug, Mic, Plus } from "lucide-react";
 import { lazy, Suspense, useRef, useState } from "react";
 
 import {
@@ -24,6 +24,7 @@ import {
 } from "#/features/workspaces/components/ai-chat/constants";
 import type { AiChatModelId, AiChatStatus } from "#/features/workspaces/components/ai-chat/types";
 import { useAiChatAttachmentIntake } from "#/features/workspaces/components/ai-chat/useAiChatAttachmentIntake";
+import { useAiChatDictation } from "#/features/workspaces/components/ai-chat/useAiChatDictation";
 import { useTypeToFocusPrompt } from "#/features/workspaces/components/ai-chat/useTypeToFocusPrompt";
 import { WorkspaceFileIntakeReviewDialog } from "#/features/workspaces/components/WorkspaceFileIntakeReviewDialog";
 import { useWorkspaceFileUpload } from "#/features/workspaces/components/WorkspaceFileUploadProvider";
@@ -98,6 +99,7 @@ export default function AiChatPromptInput({
 	const [input, setInput] = useState("");
 	const [isInspectorOpen, setIsInspectorOpen] = useState(false);
 	const textareaRef = useRef<HTMLTextAreaElement>(null);
+	const dictation = useAiChatDictation({ input, setInput });
 	const draftFiles = useWorkspaceAiComposerDraftFiles(context.workspaceId);
 	const attachmentsReady =
 		draftFiles.length === 0 || draftFiles.every((file) => file.status === "ready");
@@ -140,6 +142,7 @@ export default function AiChatPromptInput({
 			return false;
 		}
 
+		dictation.cancel();
 		setInput("");
 		return true;
 	};
@@ -165,6 +168,7 @@ export default function AiChatPromptInput({
 					<PromptInputTextarea
 						ref={textareaRef}
 						name="message"
+						readOnly={dictation.isActive}
 						value={input}
 						placeholder="Ask anything"
 						onChange={(event) => setInput(event.currentTarget.value)}
@@ -193,6 +197,21 @@ export default function AiChatPromptInput({
 					</PromptInputTools>
 
 					<WorkspaceToolbarGroup className="ml-auto">
+						{dictation.isSupported ? (
+							<WorkspaceToolbarIconButton
+								aria-label={dictation.isActive ? "Stop dictation" : "Start dictation"}
+								aria-pressed={dictation.isActive}
+								className={cn(
+									"rounded-full",
+									dictation.isActive &&
+										"bg-destructive/10 text-destructive hover:bg-destructive/20 hover:text-destructive",
+								)}
+								disabled={!canType && !dictation.isActive}
+								onClick={dictation.toggle}
+							>
+								<Mic className={dictation.isListening ? "ai-dictation-mic-pulse" : undefined} />
+							</WorkspaceToolbarIconButton>
+						) : null}
 						<AiChatPromptSubmit
 							attachmentsReady={attachmentsReady}
 							input={input}

src/features/workspaces/components/ai-chat/useAiChatDictation.ts

@@ -0,0 +1,188 @@
+import { useCallback, useEffect, useRef, useState, useSyncExternalStore } from "react";
+import { toast } from "sonner";
+
+type BrowserSpeechRecognition = {
+	continuous: boolean;
+	interimResults: boolean;
+	lang: string;
+	onend: (() => void) | null;
+	onerror: ((event: SpeechRecognitionErrorEvent) => void) | null;
+	onnomatch: (() => void) | null;
+	onresult: ((event: SpeechRecognitionEvent) => void) | null;
+	onstart: (() => void) | null;
+	abort: () => void;
+	start: () => void;
+	stop: () => void;
+};
+
+type SpeechRecognitionConstructor = new () => BrowserSpeechRecognition;
+type DictationPhase = "idle" | "starting" | "listening" | "stopping";
+
+const subscribeToSpeechRecognition = () => () => {};
+const getSpeechRecognitionSupport = () => Boolean(getSpeechRecognitionConstructor());
+const getServerSpeechRecognitionSupport = () => false;
+
+const DICTATION_ERROR_MESSAGES: Partial<Record<SpeechRecognitionErrorCode, string>> = {
+	"audio-capture": "No microphone was found.",
+	"language-not-supported": "Dictation does not support your browser language.",
+	network: "Dictation lost its connection. Try again.",
+	"no-speech": "No speech was detected. Try again.",
+	"not-allowed": "Allow microphone access in your browser to use dictation.",
+	"service-not-allowed": "Dictation is unavailable in this browser.",
+};
+
+function getSpeechRecognitionConstructor(): SpeechRecognitionConstructor | null {
+	if (typeof window === "undefined") {
+		return null;
+	}
+
+	const speechWindow = window as Window & {
+		SpeechRecognition?: SpeechRecognitionConstructor;
+		webkitSpeechRecognition?: SpeechRecognitionConstructor;
+	};
+
+	return speechWindow.SpeechRecognition ?? speechWindow.webkitSpeechRecognition ?? null;
+}
+
+function appendTranscript(input: string, transcript: string) {
+	const spokenText = transcript.trimStart();
+	if (!spokenText) {
+		return input;
+	}
+
+	const separator = input && !/\s$/.test(input) ? " " : "";
+	return `${input}${separator}${spokenText}`;
+}
+
+function readTranscript(results: SpeechRecognitionResultList) {
+	let transcript = "";
+
+	for (let index = 0; index < results.length; index += 1) {
+		transcript += results[index]?.[0]?.transcript ?? "";
+	}
+
+	return transcript;
+}
+
+export function useAiChatDictation({
+	input,
+	setInput,
+}: {
+	input: string;
+	setInput: (input: string) => void;
+}) {
+	const [phase, setPhase] = useState<DictationPhase>("idle");
+	const [isUnavailable, setIsUnavailable] = useState(false);
+	const recognitionRef = useRef<BrowserSpeechRecognition | null>(null);
+	const browserSupportsSpeechRecognition = useSyncExternalStore(
+		subscribeToSpeechRecognition,
+		getSpeechRecognitionSupport,
+		getServerSpeechRecognitionSupport,
+	);
+	const isSupported = browserSupportsSpeechRecognition && !isUnavailable;
+
+	useEffect(() => {
+		return () => {
+			const recognition = recognitionRef.current;
+			recognitionRef.current = null;
+			recognition?.abort();
+		};
+	}, []);
+
+	const cancel = useCallback(() => {
+		const recognition = recognitionRef.current;
+		recognitionRef.current = null;
+		setPhase("idle");
+		recognition?.abort();
+	}, []);
+
+	const stop = useCallback(() => {
+		const recognition = recognitionRef.current;
+		if (!recognition) {
+			return;
+		}
+
+		if (phase !== "listening") {
+			cancel();
+			return;
+		}
+
+		setPhase("stopping");
+		recognition.stop();
+	}, [cancel, phase]);
+
+	const start = useCallback(() => {
+		const Recognition = getSpeechRecognitionConstructor();
+		if (!Recognition || recognitionRef.current) {
+			return;
+		}
+
+		const recognition = new Recognition();
+		const inputBeforeDictation = input;
+		const finish = () => {
+			if (recognitionRef.current !== recognition) {
+				return false;
+			}
+
+			recognitionRef.current = null;
+			setPhase("idle");
+			return true;
+		};
+
+		recognition.continuous = true;
+		recognition.interimResults = true;
+		recognition.lang = navigator.language;
+		recognition.onstart = () => {
+			if (recognitionRef.current === recognition) {
+				setPhase("listening");
+			}
+		};
+		recognition.onresult = (event) => {
+			if (recognitionRef.current === recognition) {
+				setInput(appendTranscript(inputBeforeDictation, readTranscript(event.results)));
+			}
+		};
+		recognition.onnomatch = () => {
+			if (recognitionRef.current === recognition) {
+				toast.error("Could not recognize that. Try again.");
+			}
+		};
+		recognition.onerror = (event) => {
+			if (!finish()) {
+				return;
+			}
+
+			if (event.error === "language-not-supported" || event.error === "service-not-allowed") {
+				setIsUnavailable(true);
+			}
+
+			const message = DICTATION_ERROR_MESSAGES[event.error];
+			if (message) {
+				toast.error(message);
+			}
+		};
+		recognition.onend = () => {
+			finish();
+		};
+
+		recognitionRef.current = recognition;
+		setPhase("starting");
+
+		try {
+			recognition.start();
+		} catch {
+			finish();
+			toast.error("Dictation could not start. Try again.");
+		}
+	}, [input, setInput]);
+
+	const isActive = phase !== "idle";
+
+	return {
+		cancel,
+		isActive,
+		isListening: phase === "listening",
+		isSupported,
+		toggle: isActive ? stop : start,
+	};
+}

src/server.ts

@@ -94,7 +94,7 @@ function withSecurityHeaders(response: Response) {
 	headers.set("X-Content-Type-Options", "nosniff");
 	headers.set("Referrer-Policy", "strict-origin-when-cross-origin");
 	headers.set("X-Frame-Options", "DENY");
-	headers.set("Permissions-Policy", "camera=(), microphone=(), geolocation=()");
+	headers.set("Permissions-Policy", "camera=(), microphone=(self), geolocation=()");
 
 	if (isProduction) {
 		headers.set("Strict-Transport-Security", "max-age=63072000; includeSubDomains; preload");

src/styles.css

@@ -172,6 +172,10 @@
 		--shimmer-color: color-mix(in oklch, var(--foreground) 55%, transparent);
 	}
 
+	.ai-dictation-mic-pulse {
+		animation: ai-dictation-mic-pulse 1.4s ease-in-out infinite;
+	}
+
 	.collaboration-cursor-float {
 		animation: collaboration-cursor-float 3.6s ease-in-out infinite;
 	}
@@ -191,6 +195,17 @@
 		pointer-events: none;
 	}
 
+	@keyframes ai-dictation-mic-pulse {
+		0%,
+		100% {
+			transform: scale(1);
+		}
+
+		50% {
+			transform: scale(1.04);
+		}
+	}
+
 	@keyframes collaboration-cursor-float {
 		0%,
 		100% {