conversation-bar

1"use client"
2 
3import * as React from "react"
4import {
5  useConversationControls,
6  useConversationInput,
7  useConversationStatus,
8} from "@elevenlabs/react"
9import {
10  ArrowUpIcon,
11  ChevronDown,
12  Keyboard,
13  Mic,
14  MicOff,
15  PhoneIcon,
16  XIcon,
17} from "lucide-react"
18 
19import { cn } from "@/lib/utils"
20import { Button } from "@/components/ui/button"
21import { Card } from "@/components/ui/card"
22import { LiveWaveform } from "@/components/ui/live-waveform"
23import { Separator } from "@/components/ui/separator"
24import { Textarea } from "@/components/ui/textarea"
25 
26export interface ConversationBarProps {
27  /**
28   * ElevenLabs Agent ID to connect to
29   */
30  agentId: string
31 
32  /**
33   * Custom className for the container
34   */
35  className?: string
36 
37  /**
38   * Custom className for the waveform
39   */
40  waveformClassName?: string
41 
42  /**
43   * Callback when user sends a message
44   */
45  onSendMessage?: (message: string) => void
46}
47 
48export const ConversationBar = React.forwardRef<
49  HTMLDivElement,
50  ConversationBarProps
51>(({ agentId, className, waveformClassName, onSendMessage }, ref) => {
52  const { status } = useConversationStatus()
53  const { startSession, endSession, sendUserMessage, sendContextualUpdate } =
54    useConversationControls()
55  const { isMuted, setMuted } = useConversationInput()
56  const [keyboardOpen, setKeyboardOpen] = React.useState(false)
57  const [textInput, setTextInput] = React.useState("")
58  const mediaStreamRef = React.useRef<MediaStream | null>(null)
59 
60  const isConnected = status === "connected"
61 
62  const getMicStream = React.useCallback(async () => {
63    if (mediaStreamRef.current) return mediaStreamRef.current
64 
65    const stream = await navigator.mediaDevices.getUserMedia({ audio: true })
66    mediaStreamRef.current = stream
67 
68    return stream
69  }, [])
70 
71  const startConversation = React.useCallback(async () => {
72    try {
73      await getMicStream()
74 
75      startSession({
76        agentId,
77        connectionType: "webrtc",
78      })
79    } catch (error) {
80      console.error("Error starting conversation:", error)
81    }
82  }, [getMicStream, agentId, startSession])
83 
84  const handleEndSession = React.useCallback(() => {
85    endSession()
86 
87    if (mediaStreamRef.current) {
88      mediaStreamRef.current.getTracks().forEach((t) => t.stop())
89      mediaStreamRef.current = null
90    }
91  }, [endSession])
92 
93  const toggleMute = React.useCallback(() => {
94    setMuted(!isMuted)
95  }, [isMuted, setMuted])
96 
97  const handleStartOrEnd = React.useCallback(() => {
98// … truncated