diff --git a/examples/conversational-ai/nextjs/components/Code.tsx b/examples/conversational-ai/nextjs/components/Code.tsx deleted file mode 100644 index 54d6bdbb..00000000 --- a/examples/conversational-ai/nextjs/components/Code.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import {PropsWithChildren} from "react"; - -export function Code({children}: PropsWithChildren) { - return {children} -} \ No newline at end of file diff --git a/examples/conversational-ai/nextjs/components/ConvAI.tsx b/examples/conversational-ai/nextjs/components/ConvAI.tsx index e6f0d88c..6b7639c2 100644 --- a/examples/conversational-ai/nextjs/components/ConvAI.tsx +++ b/examples/conversational-ai/nextjs/components/ConvAI.tsx @@ -4,8 +4,9 @@ import { Button } from "@/components/ui/button"; import * as React from "react"; import { useCallback } from "react"; import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"; -import { useConversation } from "@11labs/react"; -import { cn } from "@/lib/utils"; +import { useConversation } from "@elevenlabs/react"; +import { Orb } from "@/components/ui/orb"; + async function requestMicrophonePermission() { try { @@ -40,7 +41,7 @@ export function ConvAI() { }, onMessage: message => { console.log(message); - }, + } }); async function startConversation() { @@ -50,20 +51,37 @@ export function ConvAI() { return; } const signedUrl = await getSignedUrl(); - const conversationId = await conversation.startSession({ signedUrl }); + const conversationId = await conversation.startSession({ + signedUrl + }); console.log(conversationId); } + const stopConversation = useCallback(async () => { await conversation.endSession(); }, [conversation]); + + function getAgentState() { + if (conversation.status === "connected" && conversation.isSpeaking) { + return "talking"; + } + if (conversation.status === "connected") { + return "listening"; + } + if (conversation.status === "disconnected") { + return null; + } + return null; + } + return ( -
+
- + {conversation.status === "connected" ? conversation.isSpeaking ? `Agent is speaking` @@ -71,24 +89,15 @@ export function ConvAI() { : "Disconnected"} -
-
+
+