@convai/web-sdk 0.3.2-beta.0 → 1.0.0-beta.1

package/dist/types/index.d.ts

@@ -70,6 +70,19 @@ export interface ConvaiConfig {
     startWithAudioOn?: boolean;
     /** Enable text-to-speech audio generation (default: true) */
     ttsEnabled?: boolean;
+    /**
+     * Enable lipsync/facial animation blendshapes (default: false).
+     * When true, sets blendshape_provider to "neurosync".
+     * When false, sets blendshape_provider to "none" (no facial animation data).
+     */
+    enableLipsync?: boolean;
+    /** Blendshape configuration for facial animation format */
+    blendshapeConfig?: {
+        /** Format of blendshapes: "arkit" or "mha" (Meta Human Animation, default: "mha") */
+        format?: "arkit" | "mha";
+        /** Custom mapper function to transform incoming blendshapes */
+        customMapper?: (input: number[] | Float32Array) => Float32Array;
+    };
     /** Configuration for character actions and environmental context */
     actionConfig?: {
         /** List of action names the character can perform */

package/dist/types/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/types/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/types/index.ts"],"names":[],"mappings":"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"}

package/dist/vanilla/ConvaiWidget.d.ts

@@ -10,12 +10,22 @@ import type { VanillaWidgetOptions, VanillaWidget } from "./types";
  * @param options - Widget configuration options
  * @returns VanillaWidget instance with destroy method
  *
- * @example
+ * @example Simple usage with config
+ * ```typescript
+ * import { createConvaiWidget } from '@convai/web-sdk/vanilla';
+ *
+ * const widget = createConvaiWidget(document.body, {
+ *   apiKey: 'your-api-key',
+ *   characterId: 'your-character-id',
+ *   enableVideo: false
+ * });
+ * ```
+ *
+ * @example Advanced usage with client instance
  * ```typescript
  * import { ConvaiClient, createConvaiWidget } from '@convai/web-sdk/vanilla';
  *
- * const client = new ConvaiClient();
- * await client.connect({
+ * const client = new ConvaiClient({
  *   apiKey: 'your-api-key',
  *   characterId: 'your-character-id'
  * });
@@ -26,9 +36,6 @@ import type { VanillaWidgetOptions, VanillaWidget } from "./types";
  *   showScreenShare: true,
  *   defaultVoiceMode: true
  * });
- *
- * // Later, cleanup
- * widget.destroy();
  * ```
  */
 export declare function createConvaiWidget(container: HTMLElement, options: VanillaWidgetOptions): VanillaWidget;

package/dist/vanilla/ConvaiWidget.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ConvaiWidget.d.ts","sourceRoot":"","sources":["../../src/vanilla/ConvaiWidget.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAKH,OAAO,KAAK,EAAE,oBAAoB,EAAE,aAAa,EAAe,MAAM,SAAS,CAAC;AAWhF;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,wBAAgB,kBAAkB,CAChC,SAAS,EAAE,WAAW,EACtB,OAAO,EAAE,oBAAoB,GAC5B,aAAa,CA+7Df;AAED;;;GAGG;AACH,wBAAgB,mBAAmB,CAAC,MAAM,EAAE,aAAa,GAAG,IAAI,CAE/D"}
+{"version":3,"file":"ConvaiWidget.d.ts","sourceRoot":"","sources":["../../src/vanilla/ConvaiWidget.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAMH,OAAO,KAAK,EAAE,oBAAoB,EAAE,aAAa,EAA8B,MAAM,SAAS,CAAC;AAW/F;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,wBAAgB,kBAAkB,CAChC,SAAS,EAAE,WAAW,EACtB,OAAO,EAAE,oBAAoB,GAC5B,aAAa,CAy+Df;AAED;;;GAGG;AACH,wBAAgB,mBAAmB,CAAC,MAAM,EAAE,aAAa,GAAG,IAAI,CAE/D"}

package/dist/vanilla/ConvaiWidget.js

@@ -5,6 +5,7 @@
 import { AudioRenderer } from "./AudioRenderer";
 import { aeroTheme, injectGlobalStyles } from "./styles";
 import { Icons } from "./icons";
+import { ConvaiClient } from "../core/ConvaiClient";
 /**
  * Create a Convai chat widget in the specified container
  *
@@ -12,12 +13,22 @@ import { Icons } from "./icons";
  * @param options - Widget configuration options
  * @returns VanillaWidget instance with destroy method
  *
- * @example
+ * @example Simple usage with config
+ * ```typescript
+ * import { createConvaiWidget } from '@convai/web-sdk/vanilla';
+ *
+ * const widget = createConvaiWidget(document.body, {
+ *   apiKey: 'your-api-key',
+ *   characterId: 'your-character-id',
+ *   enableVideo: false
+ * });
+ * ```
+ *
+ * @example Advanced usage with client instance
  * ```typescript
  * import { ConvaiClient, createConvaiWidget } from '@convai/web-sdk/vanilla';
  *
- * const client = new ConvaiClient();
- * await client.connect({
+ * const client = new ConvaiClient({
  *   apiKey: 'your-api-key',
  *   characterId: 'your-character-id'
  * });
@@ -28,13 +39,24 @@ import { Icons } from "./icons";
  *   showScreenShare: true,
  *   defaultVoiceMode: true
  * });
- *
- * // Later, cleanup
- * widget.destroy();
  * ```
  */
 export function createConvaiWidget(container, options) {
-    const { convaiClient, showVideo = true, showScreenShare = true, defaultVoiceMode = true } = options;
+    // Create client if not provided - guarantee it's defined
+    const client = options.convaiClient || (() => {
+        if (!options.apiKey || !options.characterId) {
+            throw new Error('Either convaiClient or (apiKey + characterId) must be provided');
+        }
+        return new ConvaiClient({
+            apiKey: options.apiKey,
+            characterId: options.characterId,
+            enableVideo: options.enableVideo ?? false,
+            startWithVideoOn: options.startWithVideoOn ?? false,
+            enableLipsync: options.enableLipsync ?? false,
+            blendshapeConfig: options.blendshapeConfig,
+        });
+    })();
+    const { showVideo = true, showScreenShare = true, defaultVoiceMode = true, onConnect, onDisconnect, onMessage } = options;
     // Inject global styles
     injectGlobalStyles();
     // State
@@ -69,16 +91,16 @@ export function createConvaiWidget(container, options) {
     let source = null;
     // Fetch character info - matches React useCharacterInfo hook
     const fetchCharacterInfo = async () => {
-        if (!convaiClient.apiKey || !convaiClient.characterId)
+        if (!client.apiKey || !client.characterId)
             return;
         try {
             const response = await fetch("https://api.convai.com/character/get", {
                 method: "POST",
                 headers: {
                     "Content-Type": "application/json",
-                    "CONVAI-API-KEY": convaiClient.apiKey,
+                    "CONVAI-API-KEY": client.apiKey,
                 },
-                body: JSON.stringify({ charID: convaiClient.characterId }),
+                body: JSON.stringify({ charID: client.characterId }),
             });
             if (response.ok) {
                 const data = await response.json();
@@ -261,8 +283,8 @@ export function createConvaiWidget(container, options) {
         if (!voiceModeOverlay)
             return;
         const bars = voiceModeOverlay.querySelectorAll(".voice-bar");
-        const isTalking = convaiClient.state.isSpeaking;
-        const isListening = !convaiClient.audioControls.isAudioMuted;
+        const isTalking = client.state.isSpeaking;
+        const isListening = !client.audioControls.isAudioMuted;
         const isAnimating = isListening || isTalking;
         // Update colors based on state
         bars.forEach((bar) => {
@@ -576,8 +598,8 @@ export function createConvaiWidget(container, options) {
       border: none;
     `;
         voiceExitButton.addEventListener("click", async () => {
-            convaiClient.sendInterruptMessage();
-            await convaiClient.audioControls.muteAudio(); // Mute on exit
+            client.sendInterruptMessage();
+            await client.audioControls.muteAudio(); // Mute on exit
             isVoiceMode = false;
             updateVoiceMode();
         });
@@ -647,8 +669,8 @@ export function createConvaiWidget(container, options) {
             }
             else {
                 // Toggle Voice Mode
-                convaiClient.sendInterruptMessage();
-                await convaiClient.audioControls.unmuteAudio(); // Unmute on enter
+                client.sendInterruptMessage();
+                await client.audioControls.unmuteAudio(); // Unmute on enter
                 isVoiceMode = true;
                 updateVoiceMode();
             }
@@ -761,8 +783,9 @@ export function createConvaiWidget(container, options) {
         resetIcon.style.width = "18px";
         resetIcon.style.height = "18px";
         settingsRow.appendChild(createOption(resetIcon, "Reset", handleReset));
-        // Video
-        if (convaiClient.connectionType === "video" && showVideo) {
+        // Video - only show if connection type is video
+        const connectionType = client.connectionType;
+        if (connectionType === "video" && showVideo) {
             const videoIcon = isVideoVisible
                 ? Icons.Video("md")
                 : Icons.VideoOff("md");
@@ -772,9 +795,9 @@ export function createConvaiWidget(container, options) {
             videoBtn.id = "convai-settings-video-btn";
             settingsRow.appendChild(videoBtn);
         }
-        // Screen Share
-        if (convaiClient.connectionType === "video" && showScreenShare) {
-            const isSharing = convaiClient.screenShareControls.isScreenShareActive;
+        // Screen Share - only show if connection type is video
+        if (connectionType === "video" && showScreenShare) {
+            const isSharing = client.screenShareControls.isScreenShareActive;
             const shareIcon = isSharing
                 ? Icons.StopScreenShare("md")
                 : Icons.ScreenShare("md");
@@ -859,7 +882,8 @@ export function createConvaiWidget(container, options) {
         resetIcon.style.height = "18px";
         settingsRow.appendChild(createOption(resetIcon, "Reset", handleReset));
         // Video - Always show if showVideo is true and connection type is video
-        if (convaiClient.connectionType === "video" && showVideo) {
+        const connectionType = client.connectionType;
+        if (connectionType === "video" && showVideo) {
             const videoIcon = isVideoVisible
                 ? Icons.Video("md")
                 : Icons.VideoOff("md");
@@ -870,8 +894,8 @@ export function createConvaiWidget(container, options) {
             settingsRow.appendChild(videoBtn);
         }
         // Screen Share - Always show if showScreenShare is true and connection type is video
-        if (convaiClient.connectionType === "video" && showScreenShare) {
-            const isSharing = convaiClient.screenShareControls.isScreenShareActive;
+        if (connectionType === "video" && showScreenShare) {
+            const isSharing = client.screenShareControls.isScreenShareActive;
             const shareIcon = isSharing
                 ? Icons.StopScreenShare("md")
                 : Icons.ScreenShare("md");
@@ -957,7 +981,7 @@ export function createConvaiWidget(container, options) {
     `;
         closeButton.addEventListener("click", (e) => {
             e.stopPropagation();
-            convaiClient.videoControls.disableVideo();
+            client.videoControls.disableVideo();
         });
         closeButton.addEventListener("mouseenter", () => {
             closeButton.style.transform = "scale(1.1)";
@@ -1077,9 +1101,9 @@ export function createConvaiWidget(container, options) {
             return;
         }
         // Connect on first click if not already connected/connecting
-        if (!convaiClient.state.isConnected && !convaiClient.state.isConnecting) {
+        if (!client.state.isConnected && !client.state.isConnecting) {
             try {
-                await convaiClient.connect();
+                await client.connect();
                 setIsOpen(true);
             }
             catch (error) {
@@ -1095,8 +1119,8 @@ export function createConvaiWidget(container, options) {
         setIsOpen(false);
     };
     const handleSend = () => {
-        if (inputValue.trim() && convaiClient.state.isConnected) {
-            convaiClient.sendUserTextMessage(inputValue);
+        if (inputValue.trim() && client.state.isConnected) {
+            client.sendUserTextMessage(inputValue);
             inputValue = "";
             inputElement.value = "";
             updateSendButton();
@@ -1105,8 +1129,8 @@ export function createConvaiWidget(container, options) {
     // Microphone toggle removed - only controlled via voice mode now
     const handleToggleMute = () => {
         isMuted = !isMuted;
-        if (convaiClient.room) {
-            const remoteParticipants = Array.from(convaiClient.room.remoteParticipants.values());
+        if (client.room) {
+            const remoteParticipants = Array.from(client.room.remoteParticipants.values());
             remoteParticipants.forEach((participant) => {
                 participant.audioTrackPublications.forEach((publication) => {
                     if (publication.track) {
@@ -1120,8 +1144,8 @@ export function createConvaiWidget(container, options) {
     const handleReset = async () => {
         setIsSettingsOpen(false);
         try {
-            await convaiClient.disconnect();
-            convaiClient.resetSession();
+            await client.disconnect();
+            client.resetSession();
             isMuted = false;
             isVoiceMode = false;
             hasEnteredDefaultVoiceMode = false;
@@ -1135,7 +1159,7 @@ export function createConvaiWidget(container, options) {
     };
     const handleDisconnect = async () => {
         setIsSettingsOpen(false);
-        await convaiClient.disconnect();
+        await client.disconnect();
         isMuted = false;
         isVoiceMode = false;
         hasEnteredDefaultVoiceMode = false;
@@ -1144,14 +1168,14 @@ export function createConvaiWidget(container, options) {
         updateSendButton();
     };
     const handleToggleVideo = async () => {
-        if (convaiClient.connectionType !== "video")
+        if (client.connectionType !== "video")
             return;
         try {
             if (isVideoVisible) {
-                await convaiClient.videoControls.disableVideo();
+                await client.videoControls.disableVideo();
             }
             else {
-                await convaiClient.videoControls.enableVideo();
+                await client.videoControls.enableVideo();
             }
             // State will be updated via event listener below
         }
@@ -1161,7 +1185,7 @@ export function createConvaiWidget(container, options) {
     };
     const handleToggleScreenShare = async () => {
         try {
-            await convaiClient.screenShareControls.toggleScreenShare();
+            await client.screenShareControls.toggleScreenShare();
             // State will be updated via event listener above
         }
         catch (e) {
@@ -1190,10 +1214,10 @@ export function createConvaiWidget(container, options) {
             chatContent.style.transform = "scale(1)";
             chatContent.style.pointerEvents = "auto";
             // Auto-enter voice mode if defaultVoiceMode is true and not already entered
-            if (defaultVoiceMode && !hasEnteredDefaultVoiceMode && convaiClient.state.isConnected) {
+            if (defaultVoiceMode && !hasEnteredDefaultVoiceMode && client.state.isConnected) {
                 setTimeout(async () => {
                     try {
-                        await convaiClient.audioControls.unmuteAudio();
+                        await client.audioControls.unmuteAudio();
                         isVoiceMode = true;
                         hasEnteredDefaultVoiceMode = true;
                         updateVoiceMode();
@@ -1246,15 +1270,15 @@ export function createConvaiWidget(container, options) {
     };
     const updateVideoTrack = () => {
         if (!floatingVideo ||
-            !convaiClient.room ||
-            !convaiClient.room.localParticipant)
+            !client.room ||
+            !client.room.localParticipant)
             return;
         const videoEl = floatingVideo.querySelector("#floating-video-element");
         const placeholder = floatingVideo.querySelector("#camera-off-placeholder");
         if (!videoEl || !placeholder)
             return;
         if (isVideoVisible && !isVoiceMode) {
-            const tracks = Array.from(convaiClient.room.localParticipant.videoTrackPublications.values());
+            const tracks = Array.from(client.room.localParticipant.videoTrackPublications.values());
             const videoPub = tracks.find((t) => t.kind === "video");
             if (videoPub && videoPub.track) {
                 videoPub.track.attach(videoEl);
@@ -1300,8 +1324,8 @@ export function createConvaiWidget(container, options) {
         }
         else {
             // Ensure microphone is muted when not in voice mode
-            if (!convaiClient.audioControls.isAudioMuted) {
-                await convaiClient.audioControls.muteAudio();
+            if (!client.audioControls.isAudioMuted) {
+                await client.audioControls.muteAudio();
             }
             // Hide Overlay
             if (voiceModeOverlay)
@@ -1571,16 +1595,16 @@ export function createConvaiWidget(container, options) {
         messageListElement.scrollTop = messageListElement.scrollHeight;
     };
     const getBotStatusColor = () => {
-        if (!convaiClient.state.isConnected) {
+        if (!client.state.isConnected) {
             return { color: "#ef4444", label: "Disconnected" };
         }
-        if (convaiClient.state.isConnecting || !convaiClient.isBotReady) {
+        if (client.state.isConnecting || !client.isBotReady) {
             return { color: "#f59e0b", label: "Connecting" };
         }
         return { color: "#10b981", label: "Connected" };
     };
     const formatMessages = () => {
-        const filteredMessages = convaiClient.chatMessages.filter((msg) => (msg.type === "user-transcription" ||
+        const filteredMessages = client.chatMessages.filter((msg) => (msg.type === "user-transcription" ||
             msg.type === "user-llm-text" ||
             msg.type === "bot-llm-text" ||
             msg.type === "bot-emotion") &&
@@ -1600,10 +1624,10 @@ export function createConvaiWidget(container, options) {
     };
     // Setup event listeners for client state changes
     const setupClientListeners = () => {
-        convaiClient.on("stateChange", () => {
+        client.on("stateChange", () => {
             updateHeader();
             // Update pulse animation based on connecting state
-            if (convaiClient.state.isConnecting) {
+            if (client.state.isConnecting) {
                 morphingContainer.style.animation =
                     "convai-pulse 2s ease-in-out infinite";
             }
@@ -1611,21 +1635,21 @@ export function createConvaiWidget(container, options) {
                 morphingContainer.style.animation = "none";
             }
             // Update speaking animation state
-            if (convaiClient.state.isSpeaking) {
+            if (client.state.isSpeaking) {
                 if (!startTime) {
                     startTime = Date.now();
                 }
             }
             else {
                 // Reset when not speaking
-                if (startTime && !convaiClient.state.isSpeaking) {
+                if (startTime && !client.state.isSpeaking) {
                     startTime = 0;
                     currentLevels = Array(40).fill(0.05);
                     targetLevels = Array(40).fill(0.05);
                 }
             }
             // Auto-collapse when disconnected
-            if (!convaiClient.state.isConnected && !convaiClient.state.isConnecting) {
+            if (!client.state.isConnected && !client.state.isConnecting) {
                 if (isOpen) {
                     setIsOpen(false);
                 }
@@ -1637,14 +1661,14 @@ export function createConvaiWidget(container, options) {
                 updateVoiceMode();
             }
             // Auto-enter voice mode on first connection if defaultVoiceMode is true
-            if (convaiClient.state.isConnected &&
+            if (client.state.isConnected &&
                 defaultVoiceMode &&
                 isOpen &&
                 !hasEnteredDefaultVoiceMode &&
                 !isVoiceMode) {
                 setTimeout(async () => {
                     try {
-                        await convaiClient.audioControls.unmuteAudio();
+                        await client.audioControls.unmuteAudio();
                         isVoiceMode = true;
                         hasEnteredDefaultVoiceMode = true;
                         updateVoiceMode();
@@ -1657,7 +1681,7 @@ export function createConvaiWidget(container, options) {
         });
         // Audio state changes now only affect voice mode (microphone button removed)
         // Video state change listener
-        convaiClient.videoControls.on("videoStateChange", (videoState) => {
+        client.videoControls.on("videoStateChange", (videoState) => {
             if (videoState.isVideoEnabled !== undefined) {
                 isVideoVisible = videoState.isVideoEnabled;
                 updateVoiceMode();
@@ -1684,7 +1708,7 @@ export function createConvaiWidget(container, options) {
             }
         });
         // Screen share state change listener
-        convaiClient.screenShareControls.on("screenShareStateChange", (screenShareState) => {
+        client.screenShareControls.on("screenShareStateChange", (screenShareState) => {
             if (screenShareState.isScreenShareActive !== undefined) {
                 const isSharing = screenShareState.isScreenShareActive;
                 const shareBtn = document.getElementById("convai-settings-share-btn");
@@ -1710,28 +1734,41 @@ export function createConvaiWidget(container, options) {
                 }
             }
         });
-        convaiClient.on("messagesChange", () => {
+        client.on("messagesChange", () => {
             updateMessageList();
+            // Call onMessage callback if provided
+            if (onMessage && client.chatMessages.length > 0) {
+                const lastMessage = client.chatMessages[client.chatMessages.length - 1];
+                onMessage(lastMessage);
+            }
         });
         // Bot ready listener - updates UI when bot becomes ready
-        convaiClient.on("botReady", () => {
+        client.on("botReady", () => {
             updateHeader(); // Update header to show green status
         });
-        convaiClient.on("connect", () => {
+        client.on("connect", () => {
             // Initialize audio renderer on connection
-            if (convaiClient.room && !audioRenderer) {
-                audioRenderer = new AudioRenderer(convaiClient.room);
+            if (client.room && !audioRenderer) {
+                audioRenderer = new AudioRenderer(client.room);
             }
             // Fetch character info
             fetchCharacterInfo();
+            // Call onConnect callback if provided
+            if (onConnect) {
+                onConnect();
+            }
         });
-        convaiClient.on("disconnect", () => {
+        client.on("disconnect", () => {
             // Cleanup audio renderer
             if (audioRenderer) {
                 audioRenderer.destroy();
                 audioRenderer = null;
             }
             updateMessageList();
+            // Call onDisconnect callback if provided
+            if (onDisconnect) {
+                onDisconnect();
+            }
         });
     };
     // Initialize
@@ -1744,13 +1781,14 @@ export function createConvaiWidget(container, options) {
         updateVoiceMode();
     }
     // If already connected, initialize audio renderer and fetch character info
-    if (convaiClient.state.isConnected && convaiClient.room) {
-        audioRenderer = new AudioRenderer(convaiClient.room);
+    if (client.state.isConnected && client.room) {
+        audioRenderer = new AudioRenderer(client.room);
         fetchCharacterInfo();
     }
     // Return widget instance
     const widget = {
         element: rootElement,
+        client: client,
         destroy: () => {
             // Cleanup audio renderer
             if (audioRenderer) {
@@ -1767,11 +1805,11 @@ export function createConvaiWidget(container, options) {
                 floatingVideo.remove();
             }
             // Unsubscribe from client events
-            convaiClient.off("stateChange", () => { });
-            convaiClient.off("messagesChange", () => { });
-            convaiClient.off("botReady", () => { });
-            convaiClient.off("connect", () => { });
-            convaiClient.off("disconnect", () => { });
+            client.off("stateChange", () => { });
+            client.off("messagesChange", () => { });
+            client.off("botReady", () => { });
+            client.off("connect", () => { });
+            client.off("disconnect", () => { });
         },
     };
     return widget;