@burdenoff/website-sdk 2026.1028.1 → 2026.1029.1

package/dist/index.mjs

@@ -6438,6 +6438,11 @@ function ConceptDetail({
   );
 }
 
+// src/components/explore-fill.ts
+function fill(template, values) {
+  return template.replace(/\{(\w+)\}/g, (match, key) => values[key] ?? match);
+}
+
 // src/components/explore-i18n.ts
 var EXPLORE_LOCALES = ["en", "zh", "hi", "es", "ar", "ta"];
 var RTL_LOCALES = /* @__PURE__ */ new Set(["ar"]);
@@ -7225,9 +7230,6 @@ function resolveExploreLocale(explicit) {
 function exploreStrings(locale) {
   return STRINGS[locale] ?? EN;
 }
-function fill(template, values) {
-  return template.replace(/\{(\w+)\}/g, (match, key) => values[key] ?? match);
-}
 
 // src/components/answers-i18n.ts
 var EN2 = {
@@ -11001,6 +11003,10 @@ function useExploreChat(options = {}) {
     [client, productId]
   );
   const canEscalate = hasConversation && !isSharedView;
+  const getConversationToken = useCallback(
+    () => conversationTokenRef.current,
+    []
+  );
   return {
     phase,
     catalog,
@@ -11025,7 +11031,8 @@ function useExploreChat(options = {}) {
     escalate,
     canEscalate,
     createShareLink,
-    isSharedView
+    isSharedView,
+    getConversationToken
   };
 }
 var optimisticCounter = 0;
@@ -15132,6 +15139,164 @@ var ExploreCta = forwardRef(
     );
   }
 );
+
+// src/components/explore-avatar-live-config.ts
+var AVATAR_WEB_API_PATH = "/api/web-avatar/v1";
+var SITE = /^[a-z][a-z0-9-]{1,31}$/;
+var VERSION = /^[A-Za-z0-9._-]{1,32}$/;
+var SITE_KEY = /^[A-Za-z0-9_-]{1,128}$/;
+var LOOPBACK_HOSTS2 = /* @__PURE__ */ new Set(["localhost", "127.0.0.1", "[::1]"]);
+function isAvatarSite(value) {
+  return SITE.test(value);
+}
+function isAvatarVersion(value) {
+  return VERSION.test(value);
+}
+function avatarApiBase(gatewayUrl) {
+  if (!gatewayUrl) return null;
+  let url;
+  try {
+    url = new URL(gatewayUrl);
+  } catch {
+    return null;
+  }
+  const local = url.protocol === "http:" && LOOPBACK_HOSTS2.has(url.hostname.toLowerCase());
+  if (url.protocol !== "https:" && !local) return null;
+  return `${url.origin}${AVATAR_WEB_API_PATH}`;
+}
+function liveConfigComplete(live) {
+  return typeof live.load === "function" && typeof live.site === "string" && isAvatarSite(live.site) && typeof live.manifestVersion === "string" && isAvatarVersion(live.manifestVersion) && typeof live.turnstileSiteKey === "string" && SITE_KEY.test(live.turnstileSiteKey);
+}
+var REVIEWED = /* @__PURE__ */ new Set(["en"]);
+function isAvatarLiveLocaleReviewed(locale) {
+  return REVIEWED.has(locale);
+}
+var VIEW_LOAD_TIMEOUT_MS = 8e3;
+function loadAvatarLiveView() {
+  return import('./avatar-live-view/index.mjs').then(
+    (loaded) => loaded.AvatarLiveView
+  );
+}
+function ExploreAvatarLive({
+  live,
+  active,
+  locale,
+  productName,
+  still,
+  fallback,
+  onContinueInChat,
+  loadView = loadAvatarLiveView
+}) {
+  const T = exploreStrings(locale);
+  const config = useWebSDKConfig();
+  const conversation = useContext(ExploreConversationContext);
+  const base = avatarApiBase(config.gatewayUrl);
+  const headers = useMemo(
+    () => cfAccessHeaders(config.gatewayUrl, config.cfAccess),
+    [config.gatewayUrl, config.cfAccess]
+  );
+  const complete = liveConfigComplete(live);
+  const off = !complete || base === null || conversation === null || conversation.isSharedView || !isAvatarLiveLocaleReviewed(locale);
+  useEffect(() => {
+    if (!complete) {
+      console.warn(
+        "[WebSDK] ExplorePanel: avatar.live needs site, load, turnstileSiteKey and manifestVersion; the live avatar stays off."
+      );
+    }
+  }, [complete]);
+  const [View, setView] = useState(null);
+  const [failed, setFailed] = useState(false);
+  const wanted = active && !off;
+  useEffect(() => {
+    if (!wanted || View !== null) return;
+    let cancelled = false;
+    let loading;
+    try {
+      loading = loadView();
+    } catch (error) {
+      loading = Promise.reject(error);
+    }
+    const patience = setTimeout(() => {
+      if (!cancelled) setFailed(true);
+    }, VIEW_LOAD_TIMEOUT_MS);
+    loading.then(
+      (component) => {
+        if (!cancelled) setView(() => component);
+      },
+      () => {
+        clearTimeout(patience);
+        if (!cancelled) setFailed(true);
+      }
+    );
+    return () => {
+      cancelled = true;
+      clearTimeout(patience);
+    };
+  }, [wanted, View, loadView]);
+  if (View !== null) {
+    return /* @__PURE__ */ jsx(
+      View,
+      {
+        live,
+        active,
+        locale,
+        productName,
+        still,
+        fallback,
+        onContinueInChat,
+        continueInChat: T.continueInChat,
+        off,
+        base,
+        headers,
+        conversation
+      }
+    );
+  }
+  if (off || failed) {
+    return (
+      // `display: contents`: the earlier Avatar view's picture, line and button lay out in the pane exactly as before.
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          style: { display: "contents" },
+          "data-boff-explore": "avatar-live",
+          "data-phase": off ? "off" : "inert",
+          children: fallback
+        }
+      )
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-boff-explore": "avatar-live",
+      "data-phase": "idle",
+      className: "flex max-h-full w-full flex-col items-center gap-4 overflow-y-auto",
+      children: [
+        /* @__PURE__ */ jsx(
+          "img",
+          {
+            src: still.src,
+            alt: still.alt,
+            decoding: "async",
+            width: 128,
+            height: 128,
+            className: "shrink-0 rounded-full border border-border object-cover shadow-sm h-32 w-32"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "p",
+          {
+            role: "status",
+            "data-boff-explore": "avatar-live-status",
+            className: "text-sm text-muted-foreground"
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { "data-boff-explore": "avatar-live-bot-check" })
+      ]
+    }
+  );
+}
 var MARK_KEY = "boffExplorePanel";
 var POS_KEY = "boffExplorePanelPos";
 var DOC_KEY = "boffExplorePanelDoc";
@@ -15323,15 +15488,15 @@ function ExplorePanel({
   const rtl = isRtlLocale(resolvedLocale);
   const catalogProducts = useContext(ExploreCatalogProductsContext);
   const pinnedSlug = pinnedProductSlug(scope, productSlug);
-  const title = useMemo(() => {
-    if (pinnedSlug === null) return T.panelTitle;
-    const name = productNameFor(
+  const pinnedName = useMemo(
+    () => pinnedSlug === null ? null : productNameFor(
       catalogProducts ?? ECOSYSTEM_PRODUCTS,
       pinnedSlug,
       productName
-    );
-    return name === null ? T.panelTitle : fill(T.panelTitleProduct, { product: name });
-  }, [T, catalogProducts, pinnedSlug, productName]);
+    ),
+    [catalogProducts, pinnedSlug, productName]
+  );
+  const title = pinnedName === null ? T.panelTitle : fill(T.panelTitleProduct, { product: pinnedName });
   const uid = useId();
   const titleId = `${uid}-title`;
   const chatTabId = `${uid}-chat-tab`;
@@ -15652,6 +15817,32 @@ function ExplorePanel({
   const tabButton = "rounded-md px-3 py-1.5 text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring";
   const expanded = size === "expanded";
   const sizeLabel = expanded ? T.exitFullScreen : T.enterFullScreen;
+  const avatarAlt = avatar?.name ? `${avatar.name}, ${T.liveAvatar}` : T.liveAvatar;
+  const comingSoon = avatar ? /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "img",
+      {
+        src: avatar.src,
+        alt: avatarAlt,
+        loading: "lazy",
+        decoding: "async",
+        width: 128,
+        height: 128,
+        className: "h-32 w-32 rounded-full border border-border object-cover shadow-sm"
+      }
+    ),
+    /* @__PURE__ */ jsx("p", { className: "text-base font-semibold", children: T.avatarComingSoon }),
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        "data-boff-explore": "panel-continue-chat",
+        className: "inline-flex items-center justify-center rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground transition-opacity hover:opacity-90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+        onClick: continueInChat,
+        children: T.continueInChat
+      }
+    )
+  ] }) : null;
   const tabs = [
     { key: "chat", id: chatTabId, pane: chatPaneId, label: T.tabChat },
     { key: "avatar", id: avatarTabId, pane: avatarPaneId, label: T.tabAvatar }
@@ -15781,7 +15972,7 @@ function ExplorePanel({
               )
             }
           ),
-          avatar ? /* @__PURE__ */ jsxs(
+          avatar ? /* @__PURE__ */ jsx(
             "div",
             {
               id: avatarPaneId,
@@ -15792,31 +15983,18 @@ function ExplorePanel({
                 "absolute inset-0 flex-col items-center justify-center gap-4 overflow-y-auto bg-background p-6 text-center",
                 view === "avatar" ? "flex" : "hidden"
               ),
-              children: [
-                /* @__PURE__ */ jsx(
-                  "img",
-                  {
-                    src: avatar.src,
-                    alt: avatar.name ? `${avatar.name}, ${T.liveAvatar}` : T.liveAvatar,
-                    loading: "lazy",
-                    decoding: "async",
-                    width: 128,
-                    height: 128,
-                    className: "h-32 w-32 rounded-full border border-border object-cover shadow-sm"
-                  }
-                ),
-                /* @__PURE__ */ jsx("p", { className: "text-base font-semibold", children: T.avatarComingSoon }),
-                /* @__PURE__ */ jsx(
-                  "button",
-                  {
-                    type: "button",
-                    "data-boff-explore": "panel-continue-chat",
-                    className: "inline-flex items-center justify-center rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground transition-opacity hover:opacity-90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
-                    onClick: continueInChat,
-                    children: T.continueInChat
-                  }
-                )
-              ]
+              children: avatar.live ? /* @__PURE__ */ jsx(
+                ExploreAvatarLive,
+                {
+                  live: avatar.live,
+                  active: open && view === "avatar",
+                  locale: resolvedLocale,
+                  productName: pinnedName,
+                  still: { src: avatar.src, alt: avatarAlt },
+                  fallback: comingSoon,
+                  onContinueInChat: continueInChat
+                }
+              ) : comingSoon
             }
           ) : null
         ] })