{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "transcriber-01",
  "description": "Transcriber",
  "dependencies": [
    "@elevenlabs/elevenlabs-js",
    "streamdown"
  ],
  "registryDependencies": [
    "https://ui.elevenlabs.io/r/live-waveform.json",
    "button",
    "card",
    "scroll-area",
    "separator"
  ],
  "files": [
    {
      "path": "blocks/transcriber-01/page.tsx",
      "content": "\"use client\"\n\nimport { Fragment, useCallback, useEffect, useRef, useState } from \"react\"\nimport { Copy } from \"lucide-react\"\nimport { Streamdown } from \"streamdown\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  transcribeAudio,\n  type TranscriptionResult,\n} from \"@/app/transcriber-01/actions/transcribe\"\nimport { Button } from \"@/components/ui/button\"\nimport { Card } from \"@/components/ui/card\"\nimport { LiveWaveform } from \"@/components/ui/live-waveform\"\nimport { ScrollArea } from \"@/components/ui/scroll-area\"\nimport { Separator } from \"@/components/ui/separator\"\n\ninterface RecordingState {\n  isRecording: boolean\n  isProcessing: boolean\n  transcript: string\n  error: string\n  transcriptionTime?: number\n}\n\nexport default function Transcriber01() {\n  const [recording, setRecording] = useState<RecordingState>({\n    isRecording: false,\n    isProcessing: false,\n    transcript: \"\",\n    error: \"\",\n  })\n\n  const mediaRecorderRef = useRef<MediaRecorder | null>(null)\n  const audioChunksRef = useRef<Blob[]>([])\n  const streamRef = useRef<MediaStream | null>(null)\n\n  const updateRecording = useCallback((updates: Partial<RecordingState>) => {\n    setRecording((prev) => ({ ...prev, ...updates }))\n  }, [])\n\n  const cleanupStream = useCallback(() => {\n    if (streamRef.current) {\n      streamRef.current.getTracks().forEach((track) => track.stop())\n      streamRef.current = null\n    }\n  }, [])\n\n  const stopRecording = useCallback(() => {\n    if (mediaRecorderRef.current?.state !== \"inactive\") {\n      mediaRecorderRef.current?.stop()\n    }\n    cleanupStream()\n    updateRecording({ isRecording: false })\n  }, [cleanupStream, updateRecording])\n\n  const processAudio = useCallback(\n    async (audioBlob: Blob) => {\n      updateRecording({ isProcessing: true, error: \"\" })\n\n      try {\n        const result: TranscriptionResult = await transcribeAudio({\n          audio: new File([audioBlob], \"recording.webm\", {\n            type: \"audio/webm\",\n          }),\n        })\n\n        if (result.error) {\n          throw new Error(result.error)\n        }\n\n        updateRecording({\n          transcript: result.text || \"\",\n          transcriptionTime: result.transcriptionTime,\n          isProcessing: false,\n        })\n      } catch (err) {\n        console.error(\"Transcription error:\", err)\n        updateRecording({\n          error:\n            err instanceof Error ? err.message : \"Failed to transcribe audio\",\n          isProcessing: false,\n        })\n      }\n    },\n    [updateRecording]\n  )\n\n  const startRecording = useCallback(async () => {\n    try {\n      updateRecording({\n        transcript: \"\",\n        error: \"\",\n        transcriptionTime: undefined,\n      })\n      audioChunksRef.current = []\n\n      const stream =\n        await navigator.mediaDevices.getUserMedia(AUDIO_CONSTRAINTS)\n      streamRef.current = stream\n\n      const mimeType = getMimeType()\n      const mediaRecorder = new MediaRecorder(stream, { mimeType })\n      mediaRecorderRef.current = mediaRecorder\n\n      mediaRecorder.ondataavailable = (event: BlobEvent) => {\n        if (event.data.size > 0) {\n          audioChunksRef.current.push(event.data)\n        }\n      }\n\n      mediaRecorder.onstop = () => {\n        const audioBlob = new Blob(audioChunksRef.current, { type: mimeType })\n        processAudio(audioBlob)\n      }\n\n      mediaRecorder.start()\n      updateRecording({ isRecording: true })\n    } catch (err) {\n      updateRecording({\n        error: \"Microphone permission denied\",\n        isRecording: false,\n      })\n      console.error(\"Microphone error:\", err)\n    }\n  }, [processAudio, updateRecording])\n\n  const handleRecordToggle = useCallback(() => {\n    if (recording.isRecording) {\n      stopRecording()\n    } else {\n      startRecording()\n    }\n  }, [recording.isRecording, startRecording, stopRecording])\n\n  useEffect(() => {\n    const handleKeyDown = (e: KeyboardEvent) => {\n      if (e.altKey && e.code === \"Space\") {\n        e.preventDefault()\n        handleRecordToggle()\n      }\n    }\n\n    window.addEventListener(\"keydown\", handleKeyDown)\n    return () => window.removeEventListener(\"keydown\", handleKeyDown)\n  }, [handleRecordToggle])\n\n  useEffect(() => {\n    return cleanupStream\n  }, [cleanupStream])\n\n  return (\n    <div className=\"mx-auto w-full\">\n      <Card className=\"border-border relative m-0 gap-0 overflow-hidden p-0 shadow-2xl\">\n        <div className=\"relative py-6\">\n          <div className=\"flex h-32 items-center justify-center\">\n            {recording.isProcessing && <TranscriberProcessing />}\n            {(Boolean(recording.transcript) || Boolean(recording.error)) && (\n              <TranscriberTranscript\n                transcript={recording.transcript}\n                error={recording.error}\n              />\n            )}\n\n            {!recording.isProcessing &&\n              !Boolean(recording.transcript) &&\n              !Boolean(recording.error) && (\n                <LiveWaveform\n                  active={recording.isRecording}\n                  barWidth={5}\n                  barGap={2}\n                  barRadius={8}\n                  barColor=\"#71717a\"\n                  fadeEdges\n                  fadeWidth={48}\n                  sensitivity={0.8}\n                  smoothingTimeConstant={0.85}\n                  className=\"w-full\"\n                />\n              )}\n          </div>\n        </div>\n\n        <Separator />\n\n        <div className=\"bg-card px-4 py-2\">\n          <div className=\"flex items-center justify-between\">\n            <div className=\"flex items-center gap-3\">\n              <span\n                className={cn(\n                  \"text-muted-foreground/60 font-mono text-[10px] tracking-widest uppercase\",\n                  (recording.transcriptionTime &&\n                    Boolean(recording.transcript)) ||\n                    Boolean(recording.error)\n                    ? \"animate-in fade-in duration-500\"\n                    : \"opacity-0\"\n                )}\n              >\n                {recording.error\n                  ? \"Error\"\n                  : recording.transcriptionTime\n                    ? `${(recording.transcriptionTime / 1000).toFixed(2)}s`\n                    : \"0.00s\"}\n              </span>\n            </div>\n\n            <div className=\"flex items-center gap-3\">\n              <Button\n                variant=\"outline\"\n                size=\"sm\"\n                className=\"gap-2\"\n                onClick={handleRecordToggle}\n                disabled={recording.isProcessing}\n                aria-label={\n                  recording.isRecording ? \"Stop recording\" : \"Start recording\"\n                }\n              >\n                {recording.isRecording || recording.isProcessing\n                  ? \"Stop\"\n                  : \"Record\"}\n                <kbd className=\"bg-muted text-muted-foreground pointer-events-none inline-flex h-5 items-center gap-1 rounded border px-1.5 font-mono text-[10px] font-medium select-none\">\n                  <span className=\"text-xs\">⌥</span>Space\n                </kbd>\n              </Button>\n            </div>\n          </div>\n        </div>\n      </Card>\n    </div>\n  )\n}\n\nconst TranscriberProcessing = () => {\n  return (\n    <LiveWaveform\n      active={false}\n      processing\n      barWidth={4}\n      barGap={1}\n      barRadius={8}\n      barColor=\"#71717a\"\n      fadeEdges\n      fadeWidth={48}\n      className=\"w-full opacity-60\"\n    />\n  )\n}\n\nconst TranscriberTranscript = ({\n  transcript,\n  error,\n}: {\n  transcript: string\n  error: string\n}) => {\n  const displayText = error || transcript\n  return (\n    <Fragment>\n      <div className=\"relative w-full max-w-2xl px-6\">\n        <ScrollArea className=\"h-32 w-full\">\n          <div\n            className={cn(\n              \"text-foreground py-1 pr-8 text-left text-sm leading-relaxed\",\n              error && \"text-red-500\"\n            )}\n          >\n            <Streamdown>{displayText}</Streamdown>\n          </div>\n        </ScrollArea>\n        {transcript && !error && (\n          <Button\n            variant=\"ghost\"\n            size=\"icon\"\n            className=\"absolute top-1 right-2 h-6 w-6 opacity-50 transition-opacity hover:opacity-100\"\n            onClick={() => {\n              navigator.clipboard.writeText(transcript)\n            }}\n            aria-label=\"Copy transcript\"\n          >\n            <Copy className=\"h-3.5 w-3.5\" />\n          </Button>\n        )}\n      </div>\n    </Fragment>\n  )\n}\n\nconst AUDIO_CONSTRAINTS: MediaStreamConstraints = {\n  audio: {\n    echoCancellation: true,\n    noiseSuppression: true,\n    autoGainControl: true,\n  },\n}\n\nconst SUPPORTED_MIME_TYPES = [\"audio/webm;codecs=opus\", \"audio/webm\"] as const\n\nfunction getMimeType(): string {\n  for (const type of SUPPORTED_MIME_TYPES) {\n    if (MediaRecorder.isTypeSupported(type)) {\n      return type\n    }\n  }\n  return \"audio/webm\"\n}\n",
      "type": "registry:page",
      "target": "app/transcriber-01/page.tsx"
    },
    {
      "path": "blocks/transcriber-01/actions/transcribe.ts",
      "content": "\"use server\"\n\nimport { ElevenLabsClient } from \"@elevenlabs/elevenlabs-js\"\nimport { SpeechToTextChunkResponseModel } from \"@elevenlabs/elevenlabs-js/api/types/SpeechToTextChunkResponseModel\"\n\nexport interface TranscriptionResult {\n  text?: string\n  error?: string\n  transcriptionTime?: number\n}\nexport type TranscribeAudioInput = {\n  audio: File\n}\n\nconst MODEL_ID = \"scribe_v1\"\n\nexport async function transcribeAudio({\n  audio,\n}: TranscribeAudioInput): Promise<TranscriptionResult> {\n  try {\n    if (!audio) {\n      return { error: \"No audio file provided\" }\n    }\n\n    const apiKey = process.env.ELEVENLABS_API_KEY\n    if (!process.env.ELEVENLABS_API_KEY) {\n      return { error: \"Service not configured\" }\n    }\n\n    const client = new ElevenLabsClient({ apiKey })\n    const audioBuffer = await audio.arrayBuffer()\n\n    const file = new File([audioBuffer], audio.name || \"audio.webm\", {\n      type: audio.type || \"audio/webm\",\n    })\n\n    const startTime = Date.now()\n    const transcriptionResult = await client.speechToText.convert({\n      file,\n      modelId: MODEL_ID,\n      languageCode: \"en\",\n    })\n    const transcriptionTime = Date.now() - startTime\n\n    const rawText = (transcriptionResult as SpeechToTextChunkResponseModel).text\n\n    if (!rawText) {\n      return { error: \"No transcription available\" }\n    }\n\n    return { text: rawText, transcriptionTime }\n  } catch (error) {\n    console.error(\"Transcription error:\", error)\n    return {\n      error:\n        error instanceof Error ? error.message : \"Failed to transcribe audio\",\n    }\n  }\n}\n",
      "type": "registry:file",
      "target": "app/transcriber-01/actions/transcribe.ts"
    }
  ],
  "meta": {
    "iframeHeight": "600px",
    "container": "w-full bg-surface min-h-svh flex px-4 py-12 items-center md:py-20 justify-center min-w-0",
    "mobile": "component"
  },
  "categories": [
    "audio"
  ],
  "type": "registry:block"
}