feat: using version 2.0 skd

README.md

@@ -15,7 +15,7 @@ Feel free to play around with the existing code and please leave any feedback fo
 
 3. Run `npm install` (assuming you have npm installed. If not, please follow these instructions: https://docs.npmjs.com/downloading-and-installing-node-js-and-npm/)
 
-4. Enter your HeyGen Enterprise API Token or Trial Token in the `.env` file. Replace `HEYGEN_API_KEY` with your API key. This will allow the Client app to generate secure Access Tokens with which to create interactive sessions.
+4. Enter your HeyGen Enterprise API Token or Trial Token in the `.env` file. Replace `PLACEHOLDER-API-KEY` with your API key. This will allow the Client app to generate secure Access Tokens with which to create interactive sessions.
 
    You can retrieve either the API Key or Trial Token by logging in to HeyGen and navigating to this page in your settings: [https://app.heygen.com/settings?nav=API]. NOTE: use the trial token if you don't have an enterprise API token yet.
 

components/InteractiveAvatar.tsx

@@ -1,9 +1,5 @@
 import type { StartAvatarResponse } from "@heygen/streaming-avatar";
-
-import StreamingAvatar, {
-  AvatarQuality,
-  StreamingEvents,
-} from "@heygen/streaming-avatar";
+import StreamingAvatar, {AvatarQuality, StreamingEvents} from "@heygen/streaming-avatar";
 import {
   Button,
   Card,
@@ -15,14 +11,10 @@ import {
   SelectItem,
   Spinner,
   Chip,
-  Tabs,
-  Tab,
 } from "@nextui-org/react";
 import { useEffect, useRef, useState } from "react";
-import { useMemoizedFn, usePrevious } from "ahooks";
-
+import { usePrevious } from 'ahooks'
 import InteractiveAvatarTextInput from "./InteractiveAvatarTextInput";
-
 import { AVATARS } from "@/app/lib/constants";
 
 export default function InteractiveAvatar() {
@@ -36,8 +28,6 @@ export default function InteractiveAvatar() {
   const [text, setText] = useState<string>("");
   const mediaStream = useRef<HTMLVideoElement>(null);
   const avatar = useRef<StreamingAvatar | null>(null);
-  const [chatMode, setChatMode] = useState("text_mode");
-  const [isUserTalking, setIsUserTalking] = useState(false);
 
   async function fetchAccessToken() {
     try {
@@ -45,7 +35,6 @@ export default function InteractiveAvatar() {
         method: "POST",
       });
       const token = await response.text();
-
       console.log("Access Token:", token); // Log the token to verify
 
       return token;
@@ -59,7 +48,6 @@ export default function InteractiveAvatar() {
   async function startSession() {
     setIsLoadingSession(true);
     const newToken = await fetchAccessToken();
-
     avatar.current = new StreamingAvatar({
       token: newToken,
     });
@@ -73,18 +61,6 @@ export default function InteractiveAvatar() {
       console.log("Stream disconnected");
       endSession();
     });
-    avatar.current?.on(StreamingEvents.STREAM_READY, (event) => {
-      console.log(">>>>> Stream ready:", event.detail);
-      setStream(event.detail);
-    });
-    avatar.current?.on(StreamingEvents.USER_START, (event) => {
-      console.log(">>>>> User started talking:", event);
-      setIsUserTalking(true);
-    });
-    avatar.current?.on(StreamingEvents.USER_STOP, (event) => {
-      console.log(">>>>> User stopped talking:", event);
-      setIsUserTalking(false);
-    });
     try {
       const res = await avatar.current.createStartAvatar({
         quality: AvatarQuality.Low,
@@ -93,9 +69,10 @@ export default function InteractiveAvatar() {
       });
 
       setData(res);
-      // default to voice mode
-      await avatar.current?.startVoiceChat();
-      setChatMode("voice_mode");
+      avatar.current?.on(StreamingEvents.STREAM_READY, (event) => {
+        console.log('Stream ready:', event.detail);
+        setStream(event.detail);
+      });
     } catch (error) {
       console.error("Error starting avatar session:", error);
     } finally {
@@ -110,7 +87,7 @@ export default function InteractiveAvatar() {
       return;
     }
     await avatar.current
-      .speak({ text: text })
+      .speak({ text: text, sessionId: data?.session_id! })
       .catch((e) => {
         setDebug(e.message);
       });
@@ -123,7 +100,7 @@ export default function InteractiveAvatar() {
       return;
     }
     await avatar.current
-      .interrupt()
+      .interrupt({ sessionId: data?.session_id! })
       .catch((e) => {
         setDebug(e.message);
       });
@@ -134,28 +111,17 @@ export default function InteractiveAvatar() {
 
       return;
     }
-    await avatar.current.stopAvatar();
+    await avatar.current.stopAvatar({
+      sessionId: data?.session_id!,
+    });
     setStream(undefined);
   }
-
-  const handleChangeChatMode = useMemoizedFn(async (v) => {
-    if (v === chatMode) {
-      return;
-    }
-    if (v === "text_mode") {
-      avatar.current?.closeVoiceChat();
-    } else {
-      await avatar.current?.startVoiceChat();
-    }
-    setChatMode(v);
-  });
-
   const previousText = usePrevious(text);
   useEffect(() => {
     if (!previousText && text) {
-      avatar.current?.startListening();
+      avatar.current?.startListening({ sessionId: data?.session_id! });
     } else if (previousText && !text) {
-      avatar?.current?.stopListening();
+      avatar?.current?.stopListening({ sessionId: data?.session_id! });
     }
   }, [text, previousText]);
 
@@ -195,18 +161,18 @@ export default function InteractiveAvatar() {
               </video>
               <div className="flex flex-col gap-2 absolute bottom-3 right-3">
                 <Button
-                  className="bg-gradient-to-tr from-indigo-500 to-indigo-300 text-white rounded-lg"
                   size="md"
-                  variant="shadow"
                   onClick={handleInterrupt}
+                  className="bg-gradient-to-tr from-indigo-500 to-indigo-300 text-white rounded-lg"
+                  variant="shadow"
                 >
                   Interrupt task
                 </Button>
                 <Button
-                  className="bg-gradient-to-tr from-indigo-500 to-indigo-300  text-white rounded-lg"
                   size="md"
-                  variant="shadow"
                   onClick={endSession}
+                  className="bg-gradient-to-tr from-indigo-500 to-indigo-300  text-white rounded-lg"
+                  variant="shadow"
                 >
                   End session
                 </Button>
@@ -219,17 +185,17 @@ export default function InteractiveAvatar() {
                   Custom Knowledge ID (optional)
                 </p>
                 <Input
-                  placeholder="Enter a custom knowledge ID"
                   value={knowledgeId}
                   onChange={(e) => setKnowledgeId(e.target.value)}
+                  placeholder="Enter a custom knowledge ID"
                 />
                 <p className="text-sm font-medium leading-none">
                   Custom Avatar ID (optional)
                 </p>
                 <Input
-                  placeholder="Enter a custom avatar ID"
                   value={avatarId}
                   onChange={(e) => setAvatarId(e.target.value)}
+                  placeholder="Enter a custom avatar ID"
                 />
                 <Select
                   placeholder="Or select one from these example avatars"
@@ -249,57 +215,32 @@ export default function InteractiveAvatar() {
                 </Select>
               </div>
               <Button
-                className="bg-gradient-to-tr from-indigo-500 to-indigo-300 w-full text-white"
                 size="md"
-                variant="shadow"
                 onClick={startSession}
+                className="bg-gradient-to-tr from-indigo-500 to-indigo-300 w-full text-white"
+                variant="shadow"
               >
                 Start session
               </Button>
             </div>
           ) : (
-            <Spinner color="default" size="lg" />
+            <Spinner size="lg" color="default" />
           )}
         </CardBody>
         <Divider />
         <CardFooter className="flex flex-col gap-3 relative">
-          <Tabs
-            aria-label="Options"
-            selectedKey={chatMode}
-            onSelectionChange={(v) => {
-              handleChangeChatMode(v);
-            }}
-          >
-            <Tab key="text_mode" title="Text mode" />
-            <Tab key="voice_mode" title="Voice mode" />
-          </Tabs>
-          {chatMode === "text_mode" ? (
-            <div className="w-full flex relative">
-              <InteractiveAvatarTextInput
-                disabled={!stream}
-                input={text}
-                label="Chat"
-                loading={isLoadingRepeat}
-                placeholder="Type something for the avatar to respond"
-                setInput={setText}
-                onSubmit={handleSpeak}
-              />
-              {text && (
-                <Chip className="absolute right-16 top-3">Listening</Chip>
-              )}
-            </div>
-          ) : (
-            <div className="w-full text-center">
-              <Button
-                isDisabled={!isUserTalking}
-                className="bg-gradient-to-tr from-indigo-500 to-indigo-300 text-white"
-                size="md"
-                variant="shadow"
-              >
-                {isUserTalking ? "Listening" : "Voice chat"}
-              </Button>
-            </div>
-          )}
+          <InteractiveAvatarTextInput
+            label="Chat"
+            placeholder="Type something for the avatar to respond"
+            input={text}
+            onSubmit={handleSpeak}
+            setInput={setText}
+            disabled={!stream}
+            loading={isLoadingRepeat}
+          />
+          {
+            text && <Chip className='absolute right-16 top-6'>Listening</Chip>
+          }
         </CardFooter>
       </Card>
       <p className="font-mono text-right">