voice-chat-03

1"use client"
2 
3import { useState } from "react"
4import { ConversationProvider, useConversation } from "@elevenlabs/react"
5import { CheckIcon, CopyIcon } from "lucide-react"
6 
7import { cn } from "@/lib/utils"
8import { Button } from "@/components/ui/button"
9import { Card, CardContent } from "@/components/ui/card"
10import {
11  Conversation,
12  ConversationContent,
13  ConversationEmptyState,
14  ConversationScrollButton,
15} from "@/components/ui/conversation"
16import { ConversationBar } from "@/components/ui/conversation-bar"
17import { Message, MessageContent } from "@/components/ui/message"
18import { Orb } from "@/components/ui/orb"
19import { Response } from "@/components/ui/response"
20import {
21  Tooltip,
22  TooltipContent,
23  TooltipProvider,
24  TooltipTrigger,
25} from "@/components/ui/tooltip"
26 
27const DEFAULT_AGENT_ID = process.env.NEXT_PUBLIC_ELEVENLABS_AGENT_ID!
28 
29interface ChatMessage {
30  role: "user" | "assistant"
31  content: string
32}
33 
34export default function Page() {
35  return (
36    <ConversationProvider>
37      <VoiceChat03 />
38    </ConversationProvider>
39  )
40}
41 
42export function VoiceChat03() {
43  const [messages, setMessages] = useState<ChatMessage[]>([])
44  const [copiedIndex, setCopiedIndex] = useState<number | null>(null)
45 
46  useConversation({
47    onConnect: () => setMessages([]),
48    onDisconnect: () => setMessages([]),
49    onMessage: (message) => {
50      if (message.message) {
51        const newMessage: ChatMessage = {
52          role: message.source === "user" ? "user" : "assistant",
53          content: message.message,
54        }
55        setMessages((prev) => [...prev, newMessage])
56      }
57    },
58  })
59 
60  return (
61    <div className="relative mx-auto h-[600px] w-full">
62      <Card className="flex h-full w-full flex-col gap-0 overflow-hidden">
63        <CardContent className="relative flex-1 overflow-hidden p-0">
64          <Conversation className="absolute inset-0 pb-[88px]">
65            <ConversationContent className="flex min-w-0 flex-col gap-2 p-6 pb-6">
66              {messages.length === 0 ? (
67                <ConversationEmptyState
68                  icon={<Orb className="size-12" />}
69                  title="Start a conversation"
70                  description="Tap the phone button or type a message"
71                />
72              ) : (
73                messages.map((message, index) => {
74                  return (
75                    <div key={index} className="flex w-full flex-col gap-1">
76                      <Message from={message.role}>
77// … truncated