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

package/dist/vanilla/ConvaiWidget.js

@@ -7,7 +7,7 @@ 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
@@ -182,6 +182,10 @@ 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;
@@ -2071,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
@@ -2080,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;
+        `;
+                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;
         `;
-                return el;
+                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 = [];
@@ -2119,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");
@@ -2129,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));
                     }
@@ -2296,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