@convai/web-sdk 1.8.0-beta.6 → 1.8.0-beta.7

package/dist/vanilla/ConvaiWidget.js

@@ -5,8 +5,10 @@
 import { AudioRenderer } from "./AudioRenderer.js";
 import { aeroTheme, injectGlobalStyles, injectKeyframes, } from "./styles.js";
 import { Icons } from "./icons.js";
+import { WidgetEventSubscriptions } from "./WidgetEventSubscriptions.js";
 import { ConvaiClient } from "../core/ConvaiClient.js";
 import { parseInlineMarkdown } from "../utils/inlineMarkdown.js";
+import { freshPublicationGrantOptions } from "../core/publishedChat.js";
 /**
  * Positioning declarations for the widget root, keyed by `placement`. The
  * `bottom-right` entry must stay byte-identical to the literals it replaces --
@@ -171,7 +173,7 @@ export function createConvaiWidget(container, options) {
                 blendshapeConfig: options.blendshapeConfig,
             });
         })();
-    const { showVideo = true, showScreenShare = true, defaultVoiceMode = true, onConnect, onDisconnect, onMessage, } = options;
+    const { showVideo = true, showScreenShare = true, defaultVoiceMode = true, requestPublicationGrant, publishedChatConnectOptions, publishedChatDescriptor, onConnect, onDisconnect, onMessage, } = options;
     // Unknown/typo'd values fall back to the default rather than throwing --
     // a bad `placement` attribute on a customer's page must not blank the
     // widget.
@@ -183,12 +185,14 @@ export function createConvaiWidget(container, options) {
     // State
     let isOpen = false;
     let isSettingsOpen = false;
-    let isVoiceMode = defaultVoiceMode;
+    let isVoiceMode = defaultVoiceMode &&
+        !requestPublicationGrant &&
+        client.connectionType !== "text";
     let isMuted = false;
     let isVideoVisible = false;
     let inputValue = "";
-    let characterName = "Character";
-    let characterImage = "";
+    let characterName = publishedChatDescriptor?.display_name || "Character";
+    let characterImage = publishedChatDescriptor?.image_url || "";
     let audioRenderer = null;
     let hasEnteredDefaultVoiceMode = false;
     /** True after we have connected at least once; used to call reconnect() instead of connect() when opening after disconnect */
@@ -209,6 +213,9 @@ export function createConvaiWidget(container, options) {
      * so a cancellation during the await is honoured.
      */
     let pendingOpen = false;
+    /** Prevent an in-flight publication grant request from connecting after teardown. */
+    let isDestroyed = false;
+    const eventSubscriptions = new WidgetEventSubscriptions(() => isDestroyed);
     // DOM elements (will be created below)
     let rootElement;
     let morphingContainer;
@@ -237,6 +244,8 @@ export function createConvaiWidget(container, options) {
     let source = null;
     // Fetch character info - matches React useCharacterInfo hook
     const fetchCharacterInfo = async () => {
+        if (publishedChatDescriptor)
+            return;
         // Prefer authToken over apiKey, matching the precedence ConvaiClient
         // uses when building /connect headers -- a client carrying both must
         // behave identically in both places.
@@ -1204,7 +1213,8 @@ export function createConvaiWidget(container, options) {
             if (inputValue.length > 0) {
                 handleSend();
             }
-            else {
+            else if (!requestPublicationGrant &&
+                client.connectionType !== "text") {
                 // Toggle Voice Mode
                 client.sendInterruptMessage();
                 try {
@@ -1319,7 +1329,9 @@ export function createConvaiWidget(container, options) {
         const resetIcon = Icons.Redo("md");
         resetIcon.style.width = "18px";
         resetIcon.style.height = "18px";
-        settingsRow.appendChild(createOption(resetIcon, "Reset", handleReset));
+        if (!client.isPublishedChatSession || requestPublicationGrant) {
+            settingsRow.appendChild(createOption(resetIcon, "Reset", handleReset));
+        }
         // Video - only show if connection type is video
         const connectionType = client.connectionType;
         if (connectionType === "video" && showVideo) {
@@ -1350,7 +1362,9 @@ export function createConvaiWidget(container, options) {
         const disconnectIcon = document.createElement("span");
         disconnectIcon.innerHTML = "⏻";
         disconnectIcon.style.fontSize = "18px";
-        settingsRow.appendChild(createOption(disconnectIcon, "Disconnect", handleDisconnect, false, true));
+        if (!client.isPublishedChatSession || requestPublicationGrant) {
+            settingsRow.appendChild(createOption(disconnectIcon, "Disconnect", handleDisconnect, false, true));
+        }
         tray.appendChild(settingsRow);
         return tray;
     };
@@ -1419,7 +1433,9 @@ export function createConvaiWidget(container, options) {
         const resetIcon = Icons.Redo("md");
         resetIcon.style.width = "18px";
         resetIcon.style.height = "18px";
-        settingsRow.appendChild(createOption(resetIcon, "Reset", handleReset));
+        if (!client.isPublishedChatSession || requestPublicationGrant) {
+            settingsRow.appendChild(createOption(resetIcon, "Reset", handleReset));
+        }
         // Video - Always show if showVideo is true and connection type is video
         const connectionType = client.connectionType;
         if (connectionType === "video" && showVideo) {
@@ -1450,7 +1466,9 @@ export function createConvaiWidget(container, options) {
         const disconnectIcon = document.createElement("span");
         disconnectIcon.innerHTML = "⏻";
         disconnectIcon.style.fontSize = "18px";
-        settingsRow.appendChild(createOption(disconnectIcon, "Disconnect", handleDisconnect, false, true));
+        if (!client.isPublishedChatSession || requestPublicationGrant) {
+            settingsRow.appendChild(createOption(disconnectIcon, "Disconnect", handleDisconnect, false, true));
+        }
     };
     // Create floating video - Matches React FloatingVideo component
     const createFloatingVideo = () => {
@@ -1643,6 +1661,8 @@ export function createConvaiWidget(container, options) {
     };
     // Event handlers
     const handleToggle = async () => {
+        if (isDestroyed)
+            return;
         if (isOpen || pendingOpen) {
             // Already open, or an open is already in flight: nothing to do. The
             // `pendingOpen` half is what keeps a repeat call from falling through
@@ -1654,24 +1674,54 @@ export function createConvaiWidget(container, options) {
         if (!client.state.isConnected && !client.state.isConnecting) {
             pendingOpen = true;
             try {
-                // Use reconnect when opening again after a disconnect (reuses stored config)
-                if (hasConnectedBefore && typeof client.reconnect === "function") {
+                if (requestPublicationGrant || client.isPublishedChatSession) {
+                    if (!requestPublicationGrant) {
+                        throw new Error("Published chat widgets require requestPublicationGrant to start a new session");
+                    }
+                    if (!client.connectWithPublicationGrant) {
+                        throw new Error("This Convai client does not support published chat connections");
+                    }
+                    const launchToken = await requestPublicationGrant();
+                    // destroy() can run while the grant endpoint is in flight. A one-time
+                    // grant must not start a session for a widget which no longer exists.
+                    if (isDestroyed) {
+                        return;
+                    }
+                    await client.connectWithPublicationGrant(launchToken, freshPublicationGrantOptions(publishedChatConnectOptions));
+                }
+                else if (hasConnectedBefore && typeof client.reconnect === "function") {
                     await client.reconnect();
                 }
                 else {
                     await client.connect();
                 }
+                if (isDestroyed) {
+                    // destroy() can also run after the grant is exchanged but before
+                    // Core or LiveKit finishes connecting. Disconnect that late session
+                    // instead of leaving an invisible room alive.
+                    await client.disconnect();
+                    return;
+                }
                 // Re-checked *after* the await: a close()/toggle()/launcher click
                 // during the connect clears the flag, and that cancellation has to
                 // win. The client stays connected either way -- only the panel is
                 // held back -- so a later open() takes the already-connected branch
                 // and opens instantly.
+                if (isDestroyed) {
+                    // destroy() can also run after the grant is exchanged but before
+                    // Core or LiveKit finishes connecting. Disconnect that late session
+                    // instead of leaving an invisible room alive.
+                    await client.disconnect();
+                    return;
+                }
                 if (!pendingOpen)
                     return;
                 setIsOpen(true);
             }
             catch (error) {
-                console.error("Failed to connect:", error);
+                if (!isDestroyed) {
+                    console.error("Failed to connect:", error);
+                }
             }
             finally {
                 pendingOpen = false;
@@ -1697,8 +1747,14 @@ export function createConvaiWidget(container, options) {
         pendingOpen = false;
         setIsOpen(false);
     };
+    // Published sessions must wait for Core's bot-ready handshake. A normal
+    // authenticated text session still gets the text-only UI, but can send as
+    // soon as it connects.
+    const requiresBotReadyForText = () => Boolean(requestPublicationGrant) || Boolean(client.isPublishedChatSession);
+    const isTextInputReady = () => client.state.isConnected &&
+        (!requiresBotReadyForText() || client.isBotReady);
     const handleSend = () => {
-        if (inputValue.trim() && client.state.isConnected) {
+        if (inputValue.trim() && isTextInputReady()) {
             client.sendUserTextMessage(inputValue);
             inputValue = "";
             inputElement.value = "";
@@ -1805,6 +1861,8 @@ export function createConvaiWidget(container, options) {
             chatContent.style.pointerEvents = "auto";
             // Auto-enter voice mode if defaultVoiceMode is true and not already entered
             if (defaultVoiceMode &&
+                !requestPublicationGrant &&
+                client.connectionType !== "text" &&
                 !hasEnteredDefaultVoiceMode &&
                 client.state.isConnected) {
                 setTimeout(async () => {
@@ -1848,7 +1906,15 @@ export function createConvaiWidget(container, options) {
             return;
         // Clear previous content
         sendButton.innerHTML = "";
-        if (inputValue.length > 0) {
+        // A published session must wait for Core's bot-ready handshake before
+        // accepting text. Preserve the established interactive-widget behavior
+        // for authenticated voice/video sessions.
+        const isPublishedTextChat = requiresBotReadyForText();
+        const textInputReady = isTextInputReady();
+        inputElement.disabled = isPublishedTextChat && !textInputReady;
+        if (inputValue.length > 0 ||
+            requestPublicationGrant ||
+            client.connectionType === "text") {
             // Show Send Button
             sendButton.appendChild(Icons.Send("md"));
             sendButton.style.background = `var(--convai-accent, ${aeroTheme.colors.text.primary})`;
@@ -1861,7 +1927,20 @@ export function createConvaiWidget(container, options) {
             // must contrast with each other, since this is the one place they meet.
             sendButton.style.color = "var(--convai-panel-bg, white)";
             sendButton.style.border = "none";
-            sendButton.title = "Send";
+            sendButton.disabled =
+                isPublishedTextChat && (inputValue.length === 0 || !textInputReady);
+            if (isPublishedTextChat) {
+                sendButton.style.opacity =
+                    inputValue.length > 0 && textInputReady ? "1" : "0.5";
+                sendButton.title = textInputReady
+                    ? inputValue.length > 0
+                        ? "Send"
+                        : "Type a message"
+                    : "Waiting for character";
+            }
+            else {
+                sendButton.title = "Send";
+            }
         }
         else {
             // Show Voice Mode Toggle
@@ -1869,6 +1948,8 @@ export function createConvaiWidget(container, options) {
             sendButton.style.background = "transparent";
             sendButton.style.color = `var(--convai-panel-fg, ${aeroTheme.colors.text.primary})`;
             sendButton.style.border = `1px solid ${aeroTheme.colors.neutral[300]}`;
+            sendButton.style.opacity = "1";
+            sendButton.disabled = false;
             sendButton.title = "Voice Mode";
         }
     };
@@ -2270,7 +2351,17 @@ export function createConvaiWidget(container, options) {
     };
     // Setup event listeners for client state changes
     const setupClientListeners = () => {
-        client.on("stateChange", () => {
+        eventSubscriptions.register((listener) => client.on("stateChange", listener), () => {
+            // Published chat (connectionType "text") has no microphone: never let
+            // a voice-mode transition leave the panel in a mode it cannot honour.
+            if (client.connectionType === "text") {
+                if (isVoiceMode) {
+                    isVoiceMode = false;
+                    hasEnteredDefaultVoiceMode = true;
+                    void updateVoiceMode();
+                }
+                updateSendButton();
+            }
             updateHeader();
             // Update pulse animation based on connecting state
             if (client.state.isConnecting) {
@@ -2328,7 +2419,7 @@ export function createConvaiWidget(container, options) {
         });
         // Audio state changes now only affect voice mode (microphone button removed)
         // Video state change listener
-        client.videoControls.on("videoStateChange", (videoState) => {
+        eventSubscriptions.register((listener) => client.videoControls.on("videoStateChange", listener), (videoState) => {
             if (videoState.isVideoEnabled !== undefined) {
                 isVideoVisible = videoState.isVideoEnabled;
                 applyVoiceMode(); // synchronous listener; see applyVoiceMode()
@@ -2381,19 +2472,15 @@ export function createConvaiWidget(container, options) {
                 }
             }
         });
-        client.on("messagesChange", () => {
+        eventSubscriptions.register((listener) => client.on("messagesChange", listener), () => {
             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
-        client.on("botReady", () => {
+        eventSubscriptions.register((listener) => client.on("botReady", listener), () => {
             updateHeader(); // Update header to show green status
+            updateSendButton();
         });
-        client.on("connect", () => {
+        eventSubscriptions.register((listener) => client.on("connect", listener), () => {
             hasConnectedBefore = true;
             // Initialize audio renderer on connection
             // NOTE: the audio elements live under rootElement, so playback ends if
@@ -2411,7 +2498,7 @@ export function createConvaiWidget(container, options) {
                 onConnect();
             }
         });
-        client.on("disconnect", () => {
+        eventSubscriptions.register((listener) => client.on("disconnect", listener), () => {
             // Cleanup audio renderer
             if (audioRenderer) {
                 audioRenderer.destroy();
@@ -2423,6 +2510,42 @@ export function createConvaiWidget(container, options) {
                 onDisconnect();
             }
         });
+        // `message` carries the row actually updated. That can differ from the
+        // list tail when correlated v2 streams interleave, which is why onMessage
+        // no longer reads the last element of chatMessages.
+        eventSubscriptions.register((listener) => client.on("message", listener), (message) => {
+            const row = message;
+            if (onMessage && row) {
+                onMessage(row);
+            }
+        });
+        // Screen share state change listener
+        eventSubscriptions.register((listener) => client.screenShareControls.on("screenShareStateChange", listener), (screenShareState) => {
+            if (screenShareState.isScreenShareActive !== undefined) {
+                const isSharing = screenShareState.isScreenShareActive;
+                const shareBtn = document.getElementById("convai-settings-share-btn");
+                if (shareBtn) {
+                    const isActive = isSharing;
+                    shareBtn.style.backgroundColor = isActive
+                        ? "rgba(16, 185, 129, 0.15)"
+                        : "transparent";
+                    shareBtn.style.color = isActive
+                        ? "#10b981"
+                        : aeroTheme.colors.text.primary;
+                    // Update Icon - first child is icon container
+                    const iconContainer = shareBtn.querySelector("div");
+                    if (iconContainer) {
+                        iconContainer.innerHTML = "";
+                        const icon = isActive
+                            ? Icons.StopScreenShare("md")
+                            : Icons.ScreenShare("md");
+                        icon.style.width = "18px";
+                        icon.style.height = "18px";
+                        iconContainer.appendChild(icon);
+                    }
+                }
+            }
+        });
     };
     // Initialize
     createDOM();
@@ -2509,6 +2632,7 @@ export function createConvaiWidget(container, options) {
             updateMessageList();
         },
         destroy: () => {
+            isDestroyed = true;
             // Cleanup audio renderer
             if (audioRenderer) {
                 audioRenderer.destroy();
@@ -2523,12 +2647,9 @@ export function createConvaiWidget(container, options) {
             if (floatingVideo.parentElement) {
                 floatingVideo.remove();
             }
-            // Unsubscribe from client events
-            client.off("stateChange", () => { });
-            client.off("messagesChange", () => { });
-            client.off("botReady", () => { });
-            client.off("connect", () => { });
-            client.off("disconnect", () => { });
+            // Unsubscribe using the exact callbacks registered above. The guards
+            // also suppress an event that was queued just before teardown.
+            eventSubscriptions.unsubscribeAll();
         },
     };
     return widget;