51:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 52:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 53:T6088,"use client" import React, { useCallback, useEffect, useMemo, useRef, useState } from "react" import Link from "next/link" import { AnimatePresence, motion } from "framer-motion" import { Copy } from "lucide-react" import { cn } from "@/lib/utils" import { useDebounce } from "@/registry/elevenlabs-ui/hooks/use-debounce" import { usePrevious } from "@/registry/elevenlabs-ui/hooks/use-previous" import { useScribe } from "@/registry/elevenlabs-ui/hooks/use-scribe" import { Badge } from "@/components/ui/badge" import { Button } from "@/components/ui/button" import { ShimmeringText } from "@/components/ui/shimmering-text" import { getScribeToken } from "./actions/get-scribe-token" import { LanguageSelector } from "./components/language-selector" interface RecordingState { error: string latenciesMs: number[] } type ConnectionState = "idle" | "connecting" | "connected" | "disconnecting" const TranscriptCharacter = React.memo( ({ char, delay }: { char: string; delay: number }) => { return ( 0 ? "filter, opacity" : "auto" }} > {char} ) } ) TranscriptCharacter.displayName = "TranscriptCharacter" // Memoize background effects to prevent re-renders const BackgroundAura = React.memo( ({ status, isConnected }: { status: string; isConnected: boolean }) => { const isActive = status === "connecting" || isConnected return (

{/* Center bottom pool - main glow */}

{/* Pulsing layer */}

{/* Left corner bloom */}

{/* Left rising glow - organic curve */}

{/* Right corner bloom */}

{/* Right rising glow - organic curve */}

{/* Shimmer overlay */}

) } ) BackgroundAura.displayName = "BackgroundAura" // Memoize bottom controls with comparison function const BottomControls = React.memo( ({ isConnected, hasError, isMac, onStop, }: { isConnected: boolean hasError: boolean isMac: boolean onStop: () => void }) => { return ( {isConnected && !hasError && ( )} ) }, (prev, next) => { if (prev.isConnected !== next.isConnected) return false if (prev.hasError !== next.hasError) return false if (prev.isMac !== next.isMac) return false return true } ) BottomControls.displayName = "BottomControls" export default function RealtimeTranscriber01() { const [recording, setRecording] = useState({ error: "", latenciesMs: [], }) const [selectedLanguage, setSelectedLanguage] = useState(null) const [connectionState, setConnectionStateState] = useState("idle") const [localTranscript, setLocalTranscript] = useState("") const [isMac, setIsMac] = useState(true) useEffect(() => { setIsMac(/(Mac|iPhone|iPod|iPad)/i.test(navigator.userAgent)) }, []) const segmentStartMsRef = useRef(null) const lastTranscriptRef = useRef("") const finalTranscriptsRef = useRef([]) const startSoundRef = useRef(null) const endSoundRef = useRef(null) const errorSoundRef = useRef(null) const errorTimeoutRef = useRef(null) const lastOperationTimeRef = useRef(0) const timerIntervalRef = useRef(null) const connectionStateRef = useRef("idle") const updateConnectionState = useCallback( (next: ConnectionState) => { connectionStateRef.current = next setConnectionStateState(next) }, [setConnectionStateState] ) const clearSessionRefs = useCallback(() => { if (timerIntervalRef.current) { clearInterval(timerIntervalRef.current) timerIntervalRef.current = null } if (errorTimeoutRef.current) { clearTimeout(errorTimeoutRef.current) errorTimeoutRef.current = null } segmentStartMsRef.current = null lastTranscriptRef.current = "" finalTranscriptsRef.current = [] }, []) // === Callbacks for Scribe === const onPartialTranscript = useCallback((data: { text?: string }) => { // Only process if we're connected if (connectionStateRef.current !== "connected") return const currentText = data.text || "" if (currentText === lastTranscriptRef.current) return lastTranscriptRef.current = currentText // Update local transcript with partial const fullText = finalTranscriptsRef.current.join(" ") const combined = fullText ? `${fullText} ${currentText}` : currentText setLocalTranscript(combined) if (currentText.length > 0 && segmentStartMsRef.current != null) { const latency = performance.now() - segmentStartMsRef.current setRecording((prev) => ({ ...prev, latenciesMs: [...prev.latenciesMs.slice(-29), latency], })) segmentStartMsRef.current = null } }, []) const onFinalTranscript = useCallback((data: { text?: string }) => { // Only process if we're connected if (connectionStateRef.current !== "connected") return lastTranscriptRef.current = "" if (data.text && data.text.length > 0) { // Add to final transcripts finalTranscriptsRef.current = [...finalTranscriptsRef.current, data.text] // Update local transcript setLocalTranscript(finalTranscriptsRef.current.join(" ")) if (segmentStartMsRef.current != null) { const latency = performance.now() - segmentStartMsRef.current setRecording((prev) => ({ ...prev, latenciesMs: [...prev.latenciesMs.slice(-29), latency], })) } } segmentStartMsRef.current = null }, []) const onError = useCallback((error: Error | Event) => { console.error("[Scribe] Error:", error) // Ignore errors if we're not supposed to be connected if (connectionStateRef.current !== "connected") { console.log("[Scribe] Ignoring error - not connected") return } const errorMessage = error instanceof Error ? error.message : "Transcription error" if (errorTimeoutRef.current) { clearTimeout(errorTimeoutRef.current) } errorTimeoutRef.current = setTimeout(() => { if (connectionStateRef.current !== "connected") return setRecording((prev) => ({ ...prev, error: errorMessage, })) errorSoundRef.current?.play().catch(() => {}) }, 500) }, []) const scribeConfig = useMemo( () => ({ modelId: "scribe_v2_realtime" as const, onPartialTranscript, onFinalTranscript, onError, }), [onPartialTranscript, onFinalTranscript, onError] ) const scribe = useScribe(scribeConfig) // Clear transcript when not connected useEffect(() => { if (connectionState !== "connected") { setLocalTranscript("") } }, [connectionState]) // Simulate audio chunk timing for latency measurement useEffect(() => { // Clear any existing interval if (timerIntervalRef.current) { clearInterval(timerIntervalRef.current) timerIntervalRef.current = null } if (connectionState !== "connected") return timerIntervalRef.current = setInterval(() => { if (segmentStartMsRef.current === null) { segmentStartMsRef.current = performance.now() } }, 100) return () => { if (timerIntervalRef.current) { clearInterval(timerIntervalRef.current) timerIntervalRef.current = null } } }, [connectionState]) const handleToggleRecording = useCallback(async () => { const now = Date.now() const timeSinceLastOp = now - lastOperationTimeRef.current // DISCONNECT if (connectionState === "connected" || connectionState === "connecting") { console.log("[Scribe] Disconnecting...") // 1. Update UI state immediately updateConnectionState("idle") setLocalTranscript("") setRecording({ error: "", latenciesMs: [] }) clearSessionRefs() // 2. Disconnect (async, don't wait) try { scribe.disconnect() scribe.clearTranscripts() } catch { // Ignore errors } // 3. Play sound if (endSoundRef.current) { endSoundRef.current.currentTime = 0 endSoundRef.current.play().catch(() => {}) } lastOperationTimeRef.current = now return } // Debounce rapid clicks for CONNECT if (timeSinceLastOp < 200) { console.log("[Scribe] Ignoring rapid click") return } lastOperationTimeRef.current = now // CONNECT if (connectionState !== "idle") { console.log("[Scribe] Not in idle state, ignoring") return } console.log("[Scribe] Connecting...") updateConnectionState("connecting") setLocalTranscript("") setRecording({ error: "", latenciesMs: [] }) clearSessionRefs() try { const result = await getScribeToken() // Check if user cancelled using ref (gets current value) if (connectionStateRef.current === "idle") { console.log("[Scribe] Cancelled during token fetch") return } if (result.error || !result.token) { throw new Error(result.error || "Failed to get token") } await scribe.connect({ token: result.token, languageCode: selectedLanguage || undefined, microphone: { echoCancellation: false, noiseSuppression: false, autoGainControl: true, }, }) // Check again after connect completes if (connectionStateRef.current !== "connecting") { console.log("[Scribe] Cancelled after connection") try { scribe.disconnect() } catch { // Ignore } return } console.log("[Scribe] Connected") updateConnectionState("connected") // Play start sound if (startSoundRef.current) { startSoundRef.current.currentTime = 0 startSoundRef.current.play().catch(() => {}) } } catch (error) { console.error("[Scribe] Connection error:", error) updateConnectionState("idle") setRecording((prev) => ({ ...prev, error: error instanceof Error ? error.message : "Connection failed", })) } }, [ clearSessionRefs, connectionState, scribe, selectedLanguage, updateConnectionState, ]) // Cmd+K / Ctrl+K shortcut useEffect(() => { const handleKeyDown = (e: KeyboardEvent) => { if ( e.key === "k" && (e.metaKey || e.ctrlKey) && e.target instanceof HTMLElement && !["INPUT", "TEXTAREA"].includes(e.target.tagName) ) { e.preventDefault() handleToggleRecording() } } window.addEventListener("keydown", handleKeyDown) return () => { window.removeEventListener("keydown", handleKeyDown) } }, [handleToggleRecording]) // Note: No unmount cleanup - React Strict Mode causes issues // The browser will handle websocket cleanup on page unload // Preload audio files on mount (no auto-play) useEffect(() => { const sounds = [ { ref: startSoundRef, url: "https://ui.elevenlabs.io/sounds/transcriber-start.mp3", }, { ref: endSoundRef, url: "https://ui.elevenlabs.io/sounds/transcriber-end.mp3", }, { ref: errorSoundRef, url: "https://ui.elevenlabs.io/sounds/transcriber-error.mp3", }, ] sounds.forEach(({ ref, url }) => { const audio = new Audio(url) audio.volume = 0.6 audio.preload = "auto" audio.load() ref.current = audio }) }, []) // Display text: prefer error, then local transcript const displayText = recording.error || localTranscript const hasContent = Boolean(displayText) && connectionState === "connected" // Determine if current transcript is partial (for styling) const isPartial = Boolean(lastTranscriptRef.current) return (

{/* Main transcript area */}

{/* Transcript - shown when there's content */}

{hasContent && ( )}

{/* Status text - shown when no content */}

{/* Language selector and button - only shown when not connected */}

Realtime Speech to Text

Transcribe your voice in real-time with high accuracy

Language

) } const TranscriberTranscript = React.memo( ({ transcript, error, isPartial, isConnected, }: { transcript: string error: string isPartial?: boolean isConnected: boolean }) => { const characters = useMemo(() => transcript.split(""), [transcript]) const previousNumChars = useDebounce( usePrevious(characters.length) || 0, 100 ) const scrollRef = useRef(null) const scrollTimeoutRef = useRef(null) // Auto-scroll to bottom when connected and text is updating useEffect(() => { if (isConnected && scrollRef.current) { if (scrollTimeoutRef.current) { clearTimeout(scrollTimeoutRef.current) } scrollTimeoutRef.current = setTimeout(() => { if (scrollRef.current) { scrollRef.current.scrollTop = scrollRef.current.scrollHeight } }, 50) } return () => { if (scrollTimeoutRef.current) { clearTimeout(scrollTimeoutRef.current) } } }, [transcript, isConnected]) return (

{characters.map((char, index) => { const delay = index >= previousNumChars ? (index - previousNumChars + 1) * 0.012 : 0 return ( ) })}

{transcript && !error && !isPartial && ( )}

) } ) TranscriberTranscript.displayName = "TranscriberTranscript" 54:T40a,"use server" export interface ScribeTokenResult { token?: string error?: string } export async function getScribeToken(): Promise { try { const apiKey = process.env.ELEVENLABS_API_KEY if (!apiKey) { return { error: "Service not configured" } } const response = await fetch( "https://api.elevenlabs.io/v1/single-use-token/realtime_scribe", { method: "POST", headers: { "xi-api-key": apiKey, }, } ) if (!response.ok) { const errorText = await response.text() console.error("Failed to get Scribe token:", errorText) return { error: "Failed to get transcription token" } } const data = await response.json() if (!data.token) { return { error: "Invalid token response" } } return { token: data.token } } catch (error) { console.error("Error getting Scribe token:", error) return { error: error instanceof Error ? error.message : "Failed to get token", } } } 55:T11ff,"use client" import { useState } from "react" import { ChevronDown, Globe } from "lucide-react" import { Button } from "@/components/ui/button" import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, } from "@/components/ui/command" import { Popover, PopoverContent, PopoverTrigger, } from "@/components/ui/popover" interface LanguageOption { code: string name: string } const LANGUAGE_OPTIONS: LanguageOption[] = [ { code: "af", name: "Afrikaans" }, { code: "ar", name: "Arabic" }, { code: "hy", name: "Armenian" }, { code: "az", name: "Azerbaijani" }, { code: "be", name: "Belarusian" }, { code: "bn", name: "Bengali" }, { code: "bs", name: "Bosnian" }, { code: "bg", name: "Bulgarian" }, { code: "ca", name: "Catalan" }, { code: "zh", name: "Chinese" }, { code: "hr", name: "Croatian" }, { code: "cs", name: "Czech" }, { code: "da", name: "Danish" }, { code: "nl", name: "Dutch" }, { code: "en", name: "English" }, { code: "et", name: "Estonian" }, { code: "fi", name: "Finnish" }, { code: "fr", name: "French" }, { code: "gl", name: "Galician" }, { code: "ka", name: "Georgian" }, { code: "de", name: "German" }, { code: "el", name: "Greek" }, { code: "gu", name: "Gujarati" }, { code: "he", name: "Hebrew" }, { code: "hi", name: "Hindi" }, { code: "hu", name: "Hungarian" }, { code: "is", name: "Icelandic" }, { code: "id", name: "Indonesian" }, { code: "it", name: "Italian" }, { code: "ja", name: "Japanese" }, { code: "kn", name: "Kannada" }, { code: "kk", name: "Kazakh" }, { code: "ko", name: "Korean" }, { code: "lv", name: "Latvian" }, { code: "lt", name: "Lithuanian" }, { code: "mk", name: "Macedonian" }, { code: "ms", name: "Malay" }, { code: "ml", name: "Malayalam" }, { code: "mr", name: "Marathi" }, { code: "ne", name: "Nepali" }, { code: "no", name: "Norwegian" }, { code: "fa", name: "Persian" }, { code: "pl", name: "Polish" }, { code: "pt", name: "Portuguese" }, { code: "ro", name: "Romanian" }, { code: "ru", name: "Russian" }, { code: "sr", name: "Serbian" }, { code: "sk", name: "Slovak" }, { code: "sl", name: "Slovenian" }, { code: "es", name: "Spanish" }, { code: "sw", name: "Swahili" }, { code: "sv", name: "Swedish" }, { code: "ta", name: "Tamil" }, { code: "te", name: "Telugu" }, { code: "th", name: "Thai" }, { code: "tr", name: "Turkish" }, { code: "uk", name: "Ukrainian" }, { code: "ur", name: "Urdu" }, { code: "vi", name: "Vietnamese" }, ] interface LanguageSelectorProps { value: string | null onValueChange: (code: string | null) => void disabled?: boolean } export function LanguageSelector({ value, onValueChange, disabled = false, }: LanguageSelectorProps) { const [open, setOpen] = useState(false) const selectedName = value ? LANGUAGE_OPTIONS.find((l) => l.code === value)?.name || value : "Auto-detect" return ( No language found. { onValueChange(null) setOpen(false) }} > Auto-detect {LANGUAGE_OPTIONS.map((language) => ( { onValueChange(language.code) setOpen(false) }} > {language.name} ({language.code}) ))} ) } 50:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","@elevenlabs/react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40elevenlabs%2Freact","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@elevenlabs/react"}]]}]}],["$","li","framer-motion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/framer-motion","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"framer-motion"}]]}]}]]}],["$","$L51",null,{"namespace":"@elevenlabs-ui","registryDependencies":["badge","button","scroll-area","https://ui.elevenlabs.io/r/shimmering-text.json"]}]]}],null]}],["$","$L52",null,{"files":[{"path":"blocks/realtime-transcriber-01/page.tsx","content":"$53","type":"registry:page","target":"app/realtime-transcriber-01/page.tsx"},{"path":"blocks/realtime-transcriber-01/actions/get-scribe-token.ts","content":"$54","type":"registry:file","target":"app/realtime-transcriber-01/actions/get-scribe-token.ts"},{"path":"blocks/realtime-transcriber-01/components/language-selector.tsx","content":"$55","type":"registry:component","target":"components/language-selector.tsx"}],"className":"h-[70svh] min-h-80"}]]}]