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

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,23 @@ 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,
+        });
+    })();
+    const { showVideo = true, showScreenShare = true, defaultVoiceMode = true, onConnect, onDisconnect, onMessage } = options;
     // Inject global styles
     injectGlobalStyles();
     // State
@@ -69,16 +90,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 +282,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 +597,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 +668,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 +782,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 +794,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 +881,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 +893,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 +980,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 +1100,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 +1118,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 +1128,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 +1143,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 +1158,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 +1167,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 +1184,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 +1213,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 +1269,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 +1323,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 +1594,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 +1623,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 +1634,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 +1660,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 +1680,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 +1707,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 +1733,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 +1780,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 +1804,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;