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

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 { parseInlineMarkdown, compactUrl } 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.
@@ -180,15 +182,21 @@ export function createConvaiWidget(container, options) {
         : "bottom-right";
     // Inject global styles
     injectGlobalStyles(styleTarget);
+    // Keyframes were injected lazily by the connecting overlay and the settings
+    // tray, but a link-preview skeleton can render before either exists — a
+    // replayed transcript paints message bubbles immediately. Idempotent.
+    injectKeyframes(styleTarget);
     // 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 +217,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 +248,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 +1217,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 +1333,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 +1366,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 +1437,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 +1470,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 +1665,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 +1678,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 +1751,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 +1865,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 +1910,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 +1931,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 +1952,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";
         }
     };
@@ -1990,7 +2075,11 @@ export function createConvaiWidget(container, options) {
     };
     // Microphone button removed - only controlled via voice mode now
     // Helper for Markdown - matches React MarkdownRenderer.tsx
-    const renderMarkdown = (text, container) => {
+    // `media` renders inline image/video previews under a media link. Bot messages
+    // want them; the user's own bubble does not — you already know what you typed,
+    // and a preview there would let a URL a user pasted embed remote media into
+    // the transcript. Links stay clickable either way.
+    const renderMarkdown = (text, container, { media = true } = {}) => {
         if (!text)
             return;
         // Handle both actual newlines and \n escape sequences
@@ -1999,19 +2088,106 @@ export function createConvaiWidget(container, options) {
         lines.forEach((line, lineIndex) => {
             // Process markdown within each line
             // Bold, italic, links, images and bare URLs — see utils/inlineMarkdown.
+            // `cdn.example.com/a/b/c.png` -> `cdn.example.com · c.png`
+            const describeUrl = (url) => {
+                try {
+                    const { host, pathname } = new URL(url);
+                    const file = pathname.split("/").filter(Boolean).pop();
+                    return file ? `${host} · ${file}` : host;
+                }
+                catch {
+                    return url;
+                }
+            };
+            /**
+             * A preview card that reserves its space before the media arrives, so the
+             * bubble does not jump when an image decodes, and collapses to one muted
+             * line if the URL does not resolve — a character can easily invent one,
+             * and an empty player in the transcript reads as a broken widget.
+             *
+             * Chrome is derived from the inherited text colour: the widget is embedded
+             * in someone else's page, on a background this code cannot know.
+             */
             const mediaPreview = (src, alt, media) => {
+                const card = document.createElement("span");
+                card.setAttribute("part", "message-media-card");
+                card.style.cssText = `
+          display: block;
+          position: relative;
+          margin-top: 6px;
+          max-width: 320px;
+          aspect-ratio: 16 / 10;
+          border-radius: 8px;
+          overflow: hidden;
+          background: color-mix(in srgb, currentColor 6%, transparent);
+          box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 10%, transparent);
+        `;
                 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;
+          width: 100%;
+          height: 100%;
+          object-fit: ${media === "image" ? "cover" : "contain"};
           border-radius: 8px;
+          opacity: 0;
+          transition: opacity .18s ease;
         `;
-                return el;
+                const skeleton = document.createElement("span");
+                skeleton.setAttribute("part", "message-media-skeleton");
+                skeleton.setAttribute("aria-hidden", "true");
+                skeleton.dataset.convaiSkeleton = "";
+                skeleton.style.cssText = `
+          position: absolute;
+          inset: 0;
+          border-radius: 8px;
+          background: color-mix(in srgb, currentColor 8%, transparent);
+          background-image: linear-gradient(90deg, transparent, color-mix(in srgb, currentColor 12%, transparent), transparent);
+          background-size: 200% 100%;
+          animation: convai-preview-shimmer 1.4s ease-in-out infinite;
+        `;
+                const caption = document.createElement("span");
+                caption.setAttribute("part", "message-media-caption");
+                caption.textContent = describeUrl(src);
+                caption.style.cssText = `
+          display: block;
+          margin-top: 4px;
+          font-size: 11px;
+          opacity: .7;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+        `;
+                const settled = () => {
+                    el.style.opacity = "1";
+                    skeleton.remove();
+                };
+                el.addEventListener(media === "image" ? "load" : "loadedmetadata", settled);
+                el.addEventListener("error", () => {
+                    const dead = document.createElement("span");
+                    dead.setAttribute("part", "message-media-unavailable");
+                    dead.textContent = `Preview unavailable — ${describeUrl(src)}`;
+                    dead.style.cssText = `
+            display: block;
+            margin-top: 6px;
+            font-size: 11px;
+            opacity: .55;
+            font-style: italic;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+          `;
+                    card.replaceWith(dead);
+                    caption.remove();
+                });
+                card.appendChild(el);
+                card.appendChild(skeleton);
+                const frag = document.createDocumentFragment();
+                frag.appendChild(card);
+                frag.appendChild(caption);
+                return frag;
             };
             const processLine = (text) => {
                 const parts = [];
@@ -2038,7 +2214,7 @@ export function createConvaiWidget(container, options) {
                         case "link": {
                             const a = document.createElement("a");
                             a.href = node.href;
-                            a.textContent = node.label;
+                            a.textContent = node.label === node.href ? compactUrl(node.label) : node.label;
                             a.target = "_blank";
                             a.rel = "noopener noreferrer";
                             a.setAttribute("part", "message-link");
@@ -2048,13 +2224,44 @@ export function createConvaiWidget(container, options) {
                 word-break: break-all;
               `;
                             parts.push(a);
-                            if (node.media)
+                            if (media && node.media)
                                 parts.push(mediaPreview(node.href, node.label, node.media));
                             break;
                         }
-                        case "image":
-                            parts.push(mediaPreview(node.src, node.alt, "image"));
+                        case "blocked": {
+                            const blocked = document.createElement("span");
+                            blocked.setAttribute("part", "message-link-blocked");
+                            blocked.textContent = node.label;
+                            blocked.title = `Link blocked: ${node.href}`;
+                            blocked.style.cssText = `
+                opacity: .75;
+                text-decoration: underline dotted;
+                cursor: help;
+              `;
+                            parts.push(blocked);
                             break;
+                        }
+                        case "image": {
+                            if (media) {
+                                parts.push(mediaPreview(node.src, node.alt, "image"));
+                                break;
+                            }
+                            // With previews off, an image still has to say what it pointed at,
+                            // so it degrades to the same anchor a plain link would render.
+                            const imgLink = document.createElement("a");
+                            imgLink.href = node.src;
+                            imgLink.textContent = node.alt || node.src;
+                            imgLink.target = "_blank";
+                            imgLink.rel = "noopener noreferrer";
+                            imgLink.setAttribute("part", "message-link");
+                            imgLink.style.cssText = `
+                color: #10b981;
+                text-decoration: underline;
+                word-break: break-all;
+              `;
+                            parts.push(imgLink);
+                            break;
+                        }
                         default:
                             parts.push(document.createTextNode(node.text));
                     }
@@ -2215,7 +2422,7 @@ export function createConvaiWidget(container, options) {
         white-space: pre-wrap;
         word-wrap: break-word;
       `;
-            renderMarkdown(msg.text, contentDiv);
+            renderMarkdown(msg.text, contentDiv, { media: !msg.isUser });
             bubble.appendChild(contentDiv);
             messageWrapper.appendChild(bubble);
             // Timestamp - matches React exactly
@@ -2270,7 +2477,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 +2545,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 +2598,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 +2624,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 +2636,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 +2758,7 @@ export function createConvaiWidget(container, options) {
             updateMessageList();
         },
         destroy: () => {
+            isDestroyed = true;
             // Cleanup audio renderer
             if (audioRenderer) {
                 audioRenderer.destroy();
@@ -2523,12 +2773,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;