voice-chat-02

1"use client"
2 
3import { useCallback, useState } from "react"
4import {
5  ConversationProvider,
6  useConversationControls,
7  useConversationStatus,
8} from "@elevenlabs/react"
9import { AnimatePresence, motion } from "framer-motion"
10import { Loader2Icon, PhoneIcon, PhoneOffIcon } from "lucide-react"
11 
12import { cn } from "@/lib/utils"
13import { Button } from "@/components/ui/button"
14import { Card } from "@/components/ui/card"
15import { Orb } from "@/components/ui/orb"
16import { ShimmeringText } from "@/components/ui/shimmering-text"
17 
18const DEFAULT_AGENT = {
19  agentId: process.env.NEXT_PUBLIC_ELEVENLABS_AGENT_ID!,
20  name: "Customer Support",
21  description: "Tap to start voice chat",
22}
23 
24export default function Page() {
25  return (
26    <ConversationProvider>
27      <VoiceChat02 />
28    </ConversationProvider>
29  )
30}
31 
32export function VoiceChat02() {
33  const { status } = useConversationStatus()
34  const { startSession, endSession, getInputVolume, getOutputVolume } =
35    useConversationControls()
36  const [errorMessage, setErrorMessage] = useState<string | null>(null)
37 
38  const startConversation = useCallback(async () => {
39    try {
40      setErrorMessage(null)
41      await navigator.mediaDevices.getUserMedia({ audio: true })
42      startSession({
43        agentId: DEFAULT_AGENT.agentId,
44        connectionType: "webrtc",
45      })
46    } catch (error) {
47      console.error("Error starting conversation:", error)
48      if (error instanceof DOMException && error.name === "NotAllowedError") {
49        setErrorMessage("Please enable microphone permissions in your browser.")
50      }
51    }
52  }, [startSession])
53 
54  const handleCall = useCallback(() => {
55    if (status === "disconnected" || status === "error") {
56      startConversation()
57    } else if (status === "connected") {
58      endSession()
59    }
60  }, [status, endSession, startConversation])
61 
62  const isCallActive = status === "connected"
63  const isTransitioning = status === "connecting"
64 
65  const scaledInputVolume = useCallback(() => {
66    try {
67      const rawValue = getInputVolume() ?? 0
68      return Math.min(1.0, Math.pow(rawValue, 0.5) * 2.5)
69    } catch {
70      return 0
71    }
72  }, [getInputVolume])
73 
74  const scaledOutputVolume = useCallback(() => {
75    try {
76      const rawValue = getOutputVolume() ?? 0
77      return Math.min(1.0, Math.pow(rawValue, 0.5) * 2.5)
78    } catch {
79      return 0
80    }
81  }, [getOutputVolume])
82 
83  return (
84    <Card className="flex h-[400px] w-full flex-col items-center justify-center overflow-hidden p-6">
85// … truncated