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

package/dist/vanilla/ConvaiWidget.js

@@ -5,7 +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 --
@@ -170,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.
@@ -182,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 */
@@ -208,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;
@@ -236,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.
@@ -1203,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 {
@@ -1318,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) {
@@ -1349,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;
     };
@@ -1418,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) {
@@ -1449,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 = () => {
@@ -1642,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
@@ -1653,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;
@@ -1696,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 = "";
@@ -1804,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 () => {
@@ -1847,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})`;
@@ -1860,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
@@ -1868,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";
         }
     };
@@ -1997,59 +2079,65 @@ export function createConvaiWidget(container, options) {
         const lines = normalizedText.split("\n");
         lines.forEach((line, lineIndex) => {
             // Process markdown within each line
+            // Bold, italic, links, images and bare URLs — see utils/inlineMarkdown.
+            const mediaPreview = (src, alt, media) => {
+                const el = media === "image"
+                    ? Object.assign(document.createElement("img"), { src, alt, loading: "lazy" })
+                    : Object.assign(document.createElement("video"), { src, controls: true, preload: "metadata" });
+                el.setAttribute("part", "message-media");
+                el.style.cssText = `
+          display: block;
+          max-width: 100%;
+          max-height: 240px;
+          margin-top: 6px;
+          border-radius: 8px;
+        `;
+                return el;
+            };
             const processLine = (text) => {
                 const parts = [];
-                let remaining = text;
-                // Process bold and italic markdown
-                // Bold: **text** or __text__
-                // Italic: *text* or _text_
-                const markdownRegex = /(\*\*|__)(.*?)\1|\*([^*]+)\*|_([^_]+)_/g;
-                let lastIndex = 0;
-                let match;
-                while ((match = markdownRegex.exec(remaining)) !== null) {
-                    // Add text before the match
-                    if (match.index > lastIndex) {
-                        const textBefore = remaining.substring(lastIndex, match.index);
-                        if (textBefore) {
-                            parts.push(document.createTextNode(textBefore));
+                for (const node of parseInlineMarkdown(text)) {
+                    switch (node.kind) {
+                        case "strong": {
+                            // matches React UserBubble styling
+                            const strong = document.createElement("strong");
+                            strong.textContent = node.text;
+                            strong.style.cssText = `
+                font-weight: 600;
+                color: var(--convai-panel-fg, ${aeroTheme.colors.text.primary});
+              `;
+                            parts.push(strong);
+                            break;
                         }
-                    }
-                    // Determine if it's bold or italic
-                    if (match[1] && match[2]) {
-                        // Bold text (** or __) - matches React UserBubble styling
-                        const strong = document.createElement("strong");
-                        strong.textContent = match[2];
-                        strong.style.cssText = `
-              font-weight: 600;
-              color: var(--convai-panel-fg, ${aeroTheme.colors.text.primary});
-            `;
-                        parts.push(strong);
-                    }
-                    else if (match[3]) {
-                        // Italic text (*) - matches React UserBubble styling
-                        const em = document.createElement("em");
-                        em.textContent = match[3];
-                        em.style.cssText = `
-              font-style: italic;
-            `;
-                        parts.push(em);
-                    }
-                    else if (match[4]) {
-                        // Italic text (_) - matches React UserBubble styling
-                        const em = document.createElement("em");
-                        em.textContent = match[4];
-                        em.style.cssText = `
-              font-style: italic;
-            `;
-                        parts.push(em);
-                    }
-                    lastIndex = match.index + match[0].length;
-                }
-                // Add remaining text
-                if (lastIndex < remaining.length) {
-                    const textAfter = remaining.substring(lastIndex);
-                    if (textAfter) {
-                        parts.push(document.createTextNode(textAfter));
+                        case "em": {
+                            const em = document.createElement("em");
+                            em.textContent = node.text;
+                            em.style.cssText = `font-style: italic;`;
+                            parts.push(em);
+                            break;
+                        }
+                        case "link": {
+                            const a = document.createElement("a");
+                            a.href = node.href;
+                            a.textContent = node.label;
+                            a.target = "_blank";
+                            a.rel = "noopener noreferrer";
+                            a.setAttribute("part", "message-link");
+                            a.style.cssText = `
+                color: #10b981;
+                text-decoration: underline;
+                word-break: break-all;
+              `;
+                            parts.push(a);
+                            if (node.media)
+                                parts.push(mediaPreview(node.href, node.label, node.media));
+                            break;
+                        }
+                        case "image":
+                            parts.push(mediaPreview(node.src, node.alt, "image"));
+                            break;
+                        default:
+                            parts.push(document.createTextNode(node.text));
                     }
                 }
                 return parts;
@@ -2263,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) {
@@ -2321,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()
@@ -2374,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
@@ -2404,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();
@@ -2416,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();
@@ -2485,16 +2615,24 @@ export function createConvaiWidget(container, options) {
         // message never reaches the character and is never billed as an LLM
         // turn. The `local-` id keeps it from colliding with a server-issued id.
         appendMessage: (message) => {
-            const chatMessage = {
-                id: `local-${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 10)}`,
-                type: message.sender === "user" ? "user-llm-text" : "bot-llm-text",
-                content: message.content,
-                timestamp: new Date().toISOString(),
-            };
-            client.chatMessages.push(chatMessage);
+            // Shared core path, so React and vanilla insert identically. A
+            // hand-rolled IConvaiClient without it falls back to the old local push.
+            if (typeof client.appendMessage === "function") {
+                client.appendMessage(message);
+            }
+            else {
+                const chatMessage = {
+                    id: `local-${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 10)}`,
+                    type: message.sender === "user" ? "user-llm-text" : "bot-llm-text",
+                    content: message.content,
+                    timestamp: new Date().toISOString(),
+                };
+                client.chatMessages.push(chatMessage);
+            }
             updateMessageList();
         },
         destroy: () => {
+            isDestroyed = true;
             // Cleanup audio renderer
             if (audioRenderer) {
                 audioRenderer.destroy();
@@ -2509,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;