VoiceRecorder.tsx

Records user audio via mic, encodes to webm/blob, handles permissions, uploads backend.

// Source: https://github.com/VapiAI/prank-your-dad | License: MIT | Copyright 2025 Vapi
// Provided via justclaw.it.com; keep this notice with the code.
"use client";

import React, { useState, useRef, useEffect, useCallback } from "react";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Textarea } from "@/components/ui/textarea";
import { Label } from "@/components/ui/label";
import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion";
import { Mic, Upload, Square, SkipForward, Play, Trash2 } from "lucide-react";
import { toast } from "sonner";

interface VoiceRecorderProps {
  onVoiceCloned: (voiceId: string) => void;
  hideSystemPrompt?: boole

... (truncated -- full source via MCP)