@nuancelabs/js-sdk 0.13.1 → 0.15.0

package/README.md

@@ -18,6 +18,7 @@ const conversation = createNuanceConversation({
   // Your endpoint, which mints a session token with your API key.
   token: async () => {
     const response = await fetch("/api/nuance-token", { method: "POST" });
+    if (!response.ok) throw new Error(await response.text());
     return (await response.json()).token;
   },
 });

package/index.d.ts

@@ -86,6 +86,38 @@ export declare interface AgentTurnStartedEvent extends SessionEventBase {
     source: "reply" | "say" | (string & {});
 }
 
+/**
+ * An error answer from the Nuance API that the SDK has no more specific error
+ * for, such as a `401` for an expired or used session token, a `429` when this
+ * month's conversation time is used, or a `503` once the SDK has stopped
+ * retrying a busy service. See the Errors guide for each status and `code`.
+ *
+ * Act on `status` and `code`, never on `message`: the message is the server's
+ * `detail`, written for you, and it can change.
+ *
+ * @example
+ * ```ts
+ * try {
+ *   await conversation.connect();
+ * } catch (error) {
+ *   if (error instanceof ApiError && error.status === 401) {
+ *     // The session token expired or was used: the next connect() fetches a new one.
+ *   }
+ * }
+ * ```
+ */
+export declare class ApiError extends Error {
+    /** The HTTP status, such as `401` or `503`. */
+    readonly status: number;
+    /** The error's `code` when the server sent one, such as `"busy"` or `"unavailable"`. */
+    readonly code: string | null;
+    /** How long to wait before trying again, when the server said. */
+    readonly retryAfterSeconds: number | null;
+    /** The parsed JSON body of the answer, or `null` when it had none. */
+    readonly body: unknown;
+    constructor(status: number, detail: string, body?: unknown);
+}
+
 /**
  * An audio track that can be attached to or detached from an audio element.
  */
@@ -362,7 +394,8 @@ export declare type ConversationEvent =
 * `"time-limit"` when the session was capped and ran out its clock,
 * `"policy-violation"` when the runtime ended it for content, `"refused"`
 * when the runtime would not start it, with its reason in `message` when it
-* gave one.
+* gave one. Call {@link Conversation.disconnect} then: after the runtime's
+* own end the call stays connected, with the camera and microphone on.
 */
 | {
     type: "session-ended";
@@ -416,6 +449,7 @@ export declare type ConversationStateValue = `${ConversationState}`;
  *   // Your server mints a session token with its API key.
  *   token: async () => {
  *     const response = await fetch("/api/nuance-token", { method: "POST" });
+ *     if (!response.ok) throw new Error(await response.text());
  *     return (await response.json()).token;
  *   },
  * });
@@ -448,6 +482,7 @@ export declare interface CreateNuanceConversationOptions {
      * ```ts
      * token: async () => {
      *   const response = await fetch("/api/nuance-token", { method: "POST" });
+     *   if (!response.ok) throw new Error(await response.text());
      *   return (await response.json()).token;
      * }
      * ```
@@ -704,8 +739,8 @@ export declare interface SessionPersonality {
 
 /**
  * What your server sends to `POST /session-tokens` with its API key. Every
- * field is fixed for the conversation the token starts; send `{}` for the
- * defaults.
+ * field is fixed for the conversation the token starts. Send `end_user_id`
+ * with every token; leave the other fields out for the defaults.
  */
 export declare interface SessionTokenRequest {
     /** Who the avatar is in the conversation. Leave it out for the default personality. */

package/index.js

@@ -4,7 +4,7 @@ function isRecord(value) {
 }
 
 // src/core/sdk-version.ts
-var SDK_HEADER = `js/${"0.13.1"}`;
+var SDK_HEADER = `js/${"0.15.0"}`;
 
 // src/utils.ts
 function normalizeHost(host) {
@@ -14,12 +14,16 @@ function normalizeHost(host) {
 // src/api/client.ts
 class ApiError extends Error {
   status;
+  code;
+  retryAfterSeconds;
   body;
   constructor(status, detail, body = null) {
     super(detail);
     this.name = "ApiError";
     this.status = status;
     this.body = body;
+    this.code = isRecord(body) && typeof body.code === "string" ? body.code : null;
+    this.retryAfterSeconds = isRecord(body) && typeof body.retry_after_seconds === "number" ? body.retry_after_seconds : null;
   }
 }
 
@@ -99,7 +103,6 @@ class NuanceApiClient {
     return this.headersProvider ? await this.headersProvider() : {};
   }
 }
-
 // src/core/active-session-error.ts
 class ActiveSessionError extends Error {
   constructor() {
@@ -1676,6 +1679,8 @@ var COMMAND_TIMEOUT_MS = 5000;
 var STREAM_TIMEOUT_MS = 30000;
 var BACKGROUND_ID = /^[a-z0-9][a-z0-9_-]{0,63}$/;
 var AVATAR_RETURN_TIMEOUT_MS = 8000;
+var RUNTIME_RETURN_TIMEOUT_MS = 20000;
+var RUNTIME_RECHECK_MS = 1000;
 function contextItem(item) {
   const name = item.name === undefined ? {} : { name: item.name };
   return item.type === "text" ? { type: "text", text: item.text, ...name } : { type: "image", media_type: item.mediaType, data: item.data, ...name };
@@ -1738,6 +1743,7 @@ class LiveKitConversation {
   everConnected = false;
   away = false;
   awayTimer = null;
+  runtimeTimer = null;
   presentationPaused = false;
   readySending = false;
   contextSent = null;
@@ -2049,10 +2055,14 @@ class LiveKitConversation {
       queueMicrotask(() => {
         if (this.room.state === ConnectionState2.Disconnected)
           return;
-        if (isReconnecting(this.room.state))
+        if (isReconnecting(this.room.state)) {
           this.avatarAway();
-        else
+        } else if (this.sessionEnded) {
           this.avatarLeft();
+        } else if (this.avatarInRoom()) {} else {
+          this.avatarAway();
+          this.awaitRuntimeReturn();
+        }
       });
     });
     this.room.on(RoomEvent3.Disconnected, () => {
@@ -2339,6 +2349,33 @@ class LiveKitConversation {
       this.avatarLeft();
     }, AVATAR_RETURN_TIMEOUT_MS);
   }
+  awaitRuntimeReturn(delay = RUNTIME_RETURN_TIMEOUT_MS) {
+    if (this.runtimeTimer !== null)
+      return;
+    this.runtimeTimer = setTimeout(() => {
+      this.runtimeTimer = null;
+      if (!this.away)
+        return;
+      if (isReconnecting(this.room.state)) {
+        this.awaitRuntimeReturn(RUNTIME_RECHECK_MS);
+        return;
+      }
+      if (this.room.state === ConnectionState2.Disconnected)
+        return;
+      if (this.avatarInRoom())
+        return;
+      this.clearAway();
+      this.avatarLeft();
+      this.reportEnd("connection-lost");
+    }, delay);
+  }
+  avatarInRoom() {
+    for (const [, participant] of this.room.remoteParticipants) {
+      if (this.isAvatarParticipant(participant))
+        return true;
+    }
+    return false;
+  }
   avatarBack() {
     const resume = this.presentationPaused && this._avatar.isReady;
     this.clearAway();
@@ -2354,6 +2391,10 @@ class LiveKitConversation {
       clearTimeout(this.awayTimer);
       this.awayTimer = null;
     }
+    if (this.runtimeTimer !== null) {
+      clearTimeout(this.runtimeTimer);
+      this.runtimeTimer = null;
+    }
   }
   startLayerFallback() {
     if (this.layerFallback !== null)
@@ -2812,7 +2853,7 @@ class NuanceConversation {
       return "time-limit";
     if (reason === "policy_violation")
       return "policy-violation";
-    if (this.cutOff())
+    if (reason === "runtime_silent" || this.cutOff())
       return "connection-lost";
     return "ended";
   }
@@ -3048,5 +3089,6 @@ export {
   LegalRequiredError,
   GuestLimitError,
   ConversationState,
+  ApiError,
   ActiveSessionError
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nuancelabs/js-sdk",
-  "version": "0.13.1",
+  "version": "0.15.0",
   "description": "JavaScript SDK for Nuance Labs conversation video AI avatar",
   "license": "UNLICENSED",
   "repository": {
@@ -16,10 +16,22 @@
     ".": {
       "types": "./index.d.ts",
       "import": "./index.js"
+    },
+    "./react": {
+      "types": "./react/index.d.ts",
+      "import": "./react/index.js"
     }
   },
   "sideEffects": false,
   "dependencies": {
     "livekit-client": "^2.18.4"
+  },
+  "peerDependencies": {
+    "react": ">=18"
+  },
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": true
+    }
   }
 }

package/react/index.d.ts

@@ -0,0 +1,52 @@
+import type { Conversation } from '@nuancelabs/js-sdk';
+import type { ConversationStateValue } from '@nuancelabs/js-sdk';
+import type { CreateNuanceConversationOptions } from '@nuancelabs/js-sdk';
+
+/** What {@link useNuanceConversation} returns. */
+export declare interface NuanceConversationHook {
+    /** The conversation's state; `"idle"` before the first start. */
+    readonly state: ConversationStateValue;
+    /**
+     * Why the last start or end failed, as thrown: test it with `instanceof`
+     * (`ApiError`, `MediaAccessError`, ...). Null after a start succeeds.
+     */
+    readonly error: Error | null;
+    /**
+     * The latest conversation, for anything the hook does not cover; kept after
+     * it ends, for its id. Null before the first start.
+     */
+    readonly conversation: Conversation | null;
+    /** Pass to a `<video>`'s `ref`: the avatar's video plays there. */
+    readonly videoRef: (element: HTMLVideoElement | null) => void;
+    /** Pass to an `<audio autoPlay>`'s `ref`: the avatar's voice plays there. */
+    readonly audioRef: (element: HTMLAudioElement | null) => void;
+    /** Starts a conversation, ending any current one. Call it from a click. */
+    readonly start: () => Promise<void>;
+    /** Ends the current conversation. */
+    readonly end: () => Promise<void>;
+}
+
+/**
+ * One conversation at a time in a React component: its state and error, refs
+ * for the elements the avatar plays in, and start and end. The hook leaves the
+ * conversation when the session ends (so the camera and microphone turn off)
+ * and when the component unmounts. Each start uses the options of the latest
+ * render.
+ *
+ * @example
+ * ```tsx
+ * const { state, error, videoRef, audioRef, start, end } =
+ *   useNuanceConversation({ token: fetchToken });
+ *
+ * return (
+ *   <>
+ *     <video ref={videoRef} autoPlay playsInline />
+ *     <audio ref={audioRef} autoPlay />
+ *     <button onClick={start}>Start</button>
+ *   </>
+ * );
+ * ```
+ */
+export declare function useNuanceConversation(options: CreateNuanceConversationOptions): NuanceConversationHook;
+
+export { }

package/react/index.js

@@ -0,0 +1,166 @@
+// src/react/index.ts
+import { useEffect, useState, useSyncExternalStore } from "react";
+
+// src/react/store.ts
+import {
+  createNuanceConversation
+} from "@nuancelabs/js-sdk";
+var IDLE = {
+  state: "idle",
+  error: null,
+  conversation: null
+};
+function asError(cause) {
+  return cause instanceof Error ? cause : new Error(String(cause));
+}
+
+class ConversationStore {
+  options;
+  create;
+  snapshot = IDLE;
+  listeners = new Set;
+  current = null;
+  unsubscribe = null;
+  video = null;
+  audio = null;
+  playingVideo = null;
+  playingAudio = null;
+  leaving = Promise.resolve();
+  constructor(options, create = createNuanceConversation) {
+    this.options = options;
+    this.create = create;
+  }
+  setOptions(options) {
+    this.options = options;
+  }
+  subscribe = (listener) => {
+    this.listeners.add(listener);
+    return () => this.listeners.delete(listener);
+  };
+  getSnapshot = () => this.snapshot;
+  setVideo = (element) => {
+    if (element === this.video)
+      return;
+    this.playingVideo?.detach();
+    this.playingVideo = null;
+    this.video = element;
+    this.attach();
+  };
+  setAudio = (element) => {
+    if (element === this.audio)
+      return;
+    this.playingAudio?.detach();
+    this.playingAudio = null;
+    this.audio = element;
+    this.attach();
+  };
+  start = async () => {
+    let conversation;
+    try {
+      conversation = this.create(this.options);
+    } catch (cause) {
+      this.update({ error: asError(cause) });
+      return;
+    }
+    const previous = this.release();
+    this.current = conversation;
+    this.unsubscribe = conversation.onChange((event) => {
+      if (this.current !== conversation)
+        return;
+      if (event.type === "state-changed")
+        this.update({ state: event.state });
+      if (event.type === "tracks-changed")
+        this.attach();
+      if (event.type === "session-ended")
+        this.end();
+    });
+    this.update({ state: conversation.state, error: null, conversation });
+    if (previous)
+      this.leave(previous).catch(() => {});
+    await this.leaving;
+    if (this.current !== conversation)
+      return;
+    try {
+      await conversation.connect();
+    } catch (cause) {
+      if (this.current === conversation)
+        this.update({ error: asError(cause) });
+    }
+  };
+  end = async () => {
+    const conversation = this.release();
+    if (!conversation)
+      return;
+    try {
+      await this.leave(conversation);
+    } catch (cause) {
+      if (this.current === null)
+        this.update({ error: asError(cause) });
+    }
+    if (this.current === null)
+      this.update({ state: conversation.state });
+  };
+  leave(conversation) {
+    const done = conversation.disconnect();
+    this.leaving = Promise.all([this.leaving, done.catch(() => {})]);
+    return done;
+  }
+  release() {
+    const conversation = this.current;
+    this.unsubscribe?.();
+    this.unsubscribe = null;
+    this.current = null;
+    this.playingVideo?.detach();
+    this.playingAudio?.detach();
+    this.playingVideo = null;
+    this.playingAudio = null;
+    return conversation;
+  }
+  attach() {
+    const conversation = this.current;
+    if (!conversation)
+      return;
+    let avatar;
+    try {
+      avatar = conversation.avatar;
+    } catch {
+      return;
+    }
+    const { videoTrack, audioTrack } = avatar;
+    if (this.video && videoTrack && videoTrack !== this.playingVideo) {
+      this.playingVideo?.detach();
+      videoTrack.attach(this.video);
+      this.playingVideo = videoTrack;
+    }
+    if (this.audio && audioTrack && audioTrack !== this.playingAudio) {
+      this.playingAudio?.detach();
+      audioTrack.attach(this.audio);
+      this.playingAudio = audioTrack;
+    }
+  }
+  update(change) {
+    this.snapshot = { ...this.snapshot, ...change };
+    for (const listener of this.listeners)
+      listener();
+  }
+}
+
+// src/react/index.ts
+function useNuanceConversation(options) {
+  const [store] = useState(() => new ConversationStore(options));
+  useEffect(() => store.setOptions(options));
+  const snapshot = useSyncExternalStore(store.subscribe, store.getSnapshot, store.getSnapshot);
+  useEffect(() => () => {
+    store.end();
+  }, [store]);
+  return {
+    ...snapshot,
+    videoRef: store.setVideo,
+    audioRef: store.setAudio,
+    start: store.start,
+    end: store.end
+  };
+}
+export {
+  useNuanceConversation
+};