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"}
-
-
+
+