transcribe followup

src/lib/components/chat/ChatInput.svelte

@@ -402,7 +402,7 @@
 
 					{#if $enabledServersCount > 0}
 						<div
-							class="ml-2 inline-flex h-8 items-center gap-1.5 rounded-full border border-blue-500/10 bg-blue-600/10 pl-2 pr-1 text-xs font-semibold text-blue-700 dark:bg-blue-600/20 dark:text-blue-400 sm:h-7"
+							class="ml-1.5 inline-flex h-8 items-center gap-1.5 rounded-full border border-blue-500/10 bg-blue-600/10 pl-2 pr-1 text-xs font-semibold text-blue-700 dark:bg-blue-600/20 dark:text-blue-400 sm:h-7"
 							class:grayscale={!modelSupportsTools}
 							class:opacity-60={!modelSupportsTools}
 							class:cursor-help={!modelSupportsTools}

src/lib/components/chat/ChatWindow.svelte

@@ -653,7 +653,7 @@
 							{#if transcriptionEnabled}
 								<button
 									type="button"
-									class="btn absolute bottom-2 right-10 mr-1 size-8 self-end rounded-full border bg-white/50 text-gray-500 transition-none hover:bg-gray-50 hover:text-gray-700 dark:border-transparent dark:bg-gray-600 dark:text-gray-300 dark:hover:bg-gray-500 dark:hover:text-white sm:right-9 sm:size-7"
+									class="btn absolute bottom-2 right-10 mr-1.5 size-8 self-end rounded-full border bg-white/50 text-gray-500 transition-none hover:bg-gray-50 hover:text-gray-700 dark:border-transparent dark:bg-gray-600 dark:text-gray-300 dark:hover:bg-gray-500 dark:hover:text-white sm:right-9 sm:size-7"
 									disabled={isReadOnly}
 									onclick={() => {
 										isRecording = true;

src/lib/components/chat/VoiceRecorder.svelte

@@ -100,44 +100,52 @@
 		}
 	}
 
-	function stopRecording(): Blob | null {
-		stopVisualization();
-
-		if (mediaRecorder && mediaRecorder.state !== "inactive") {
-			mediaRecorder.stop();
-		}
-
-		// Stop all audio tracks
-		if (mediaStream) {
-			mediaStream.getTracks().forEach((track) => track.stop());
-			mediaStream = null;
-		}
-
-		// Close audio context
-		if (audioContext) {
-			audioContext.close();
-			audioContext = null;
-		}
+	function stopRecording(): Promise<Blob | null> {
+		return new Promise((resolve) => {
+			stopVisualization();
+
+			// Stop all audio tracks
+			if (mediaStream) {
+				mediaStream.getTracks().forEach((track) => track.stop());
+				mediaStream = null;
+			}
 
-		analyser = null;
-		mediaRecorder = null;
+			// Close audio context
+			if (audioContext) {
+				audioContext.close();
+				audioContext = null;
+			}
+			analyser = null;
+
+			if (!mediaRecorder || mediaRecorder.state === "inactive") {
+				mediaRecorder = null;
+				resolve(
+					audioChunks.length > 0
+						? new Blob(audioChunks, { type: audioChunks[0]?.type || "audio/webm" })
+						: null
+				);
+				return;
+			}
 
-		if (audioChunks.length === 0) {
-			return null;
-		}
+			// Wait for final data before resolving
+			mediaRecorder.onstop = () => {
+				const mimeType = audioChunks[0]?.type || "audio/webm";
+				const blob = audioChunks.length > 0 ? new Blob(audioChunks, { type: mimeType }) : null;
+				mediaRecorder = null;
+				resolve(blob);
+			};
 
-		// Create blob from chunks
-		const mimeType = audioChunks[0]?.type || "audio/webm";
-		return new Blob(audioChunks, { type: mimeType });
+			mediaRecorder.stop();
+		});
 	}
 
-	function handleCancel() {
-		stopRecording();
+	async function handleCancel() {
+		await stopRecording();
 		oncancel();
 	}
 
-	function handleConfirm() {
-		const audioBlob = stopRecording();
+	async function handleConfirm() {
+		const audioBlob = await stopRecording();
 		if (audioBlob && audioBlob.size > 0) {
 			if (isTouchDevice) {
 				onsend(audioBlob);
@@ -154,6 +162,7 @@
 	});
 
 	onDestroy(() => {
+		// Fire and forget - cleanup happens but we don't wait
 		stopRecording();
 	});
 </script>

src/routes/api/transcribe/+server.ts

@@ -29,7 +29,10 @@ export async function POST({ request, locals }) {
 		throw error(401, "Authentication required");
 	}
 
-	const contentType = request.headers.get("content-type") || "";
+	const rawContentType = request.headers.get("content-type") || "";
+	// Normalize content-type: Safari sends "audio/webm; codecs=opus" (with space)
+	// but HF API expects "audio/webm;codecs=opus" (no space)
+	const contentType = rawContentType.replace(/;\s+/g, ";");
 	const isAllowed = ALLOWED_CONTENT_TYPES.some((type) => contentType.includes(type));
 
 	if (!isAllowed) {