@burdenoff/website-sdk 2026.829.1 → 2026.829.3

package/dist/components/explore.mjs

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { createContext, useMemo, useState, useRef, useCallback, useEffect, useContext } from 'react';
-import { Sparkles, RotateCcw, History, Trash2, Mic, Square, ArrowUp, BookOpenText, Layers, Link2, TriangleAlert, ChevronLeft, ChevronRight, ExternalLink } from 'lucide-react';
+import { Sparkles, RotateCcw, Link2, History, Trash2, Mic, Square, ArrowUp, BookOpenText, Layers, TriangleAlert, ChevronLeft, ChevronRight, ExternalLink } from 'lucide-react';
 import ReactMarkdown from 'react-markdown';
 import rehypeSanitize from 'rehype-sanitize';
 import remarkGfm from 'remark-gfm';
@@ -463,6 +463,7 @@ var EXPLORE_MESSAGE_FIELDS = (
     description
     product
     imageUrl
+    index
   }
   ctas {
     kind
@@ -470,6 +471,8 @@ var EXPLORE_MESSAGE_FIELDS = (
     url
     product
   }
+  followUps
+  answered
   errorCode
   createdAt
   completedAt
@@ -535,6 +538,26 @@ var SEND_EXPLORE_MESSAGE_MUTATION = (
   }
 `
 );
+var RECORD_EXPLORE_CLICK_MUTATION = (
+  /* GraphQL */
+  `
+  mutation RecordExploreClick($input: RecordExploreClickInput!) {
+    recordExploreClick(input: $input) {
+      recorded
+    }
+  }
+`
+);
+var CREATE_EXPLORE_SHARE_LINK_MUTATION = (
+  /* GraphQL */
+  `
+  mutation CreateExploreShareLink($conversationToken: String!) {
+    createExploreShareLink(conversationToken: $conversationToken) {
+      shareToken
+    }
+  }
+`
+);
 
 // src/data/products.ts
 var ECOSYSTEM_PRODUCTS = [
@@ -1467,6 +1490,30 @@ function useExploreChat(options = {}) {
     return null;
   }, [messages]);
   const canSend = (phase === "ready" || phase === "error") && catalog.enabled && turnCount < catalog.limits.maxTurnsPerConversation;
+  const createShareLink = useCallback(async () => {
+    const token = conversationTokenRef.current;
+    if (!token) return null;
+    try {
+      const result = await client.mutate(CREATE_EXPLORE_SHARE_LINK_MUTATION, { conversationToken: token });
+      return result?.data?.createExploreShareLink?.shareToken ?? null;
+    } catch {
+      return null;
+    }
+  }, [client]);
+  const recordClick = useCallback(
+    (messageId, kind, url) => {
+      const token = conversationTokenRef.current;
+      if (!token) return;
+      try {
+        void client.mutate(RECORD_EXPLORE_CLICK_MUTATION, {
+          input: { conversationToken: token, messageId, kind, url }
+        }).catch(() => {
+        });
+      } catch {
+      }
+    },
+    [client]
+  );
   return {
     phase,
     catalog,
@@ -1484,7 +1531,9 @@ function useExploreChat(options = {}) {
     history: archive,
     openConversation,
     deleteConversation,
-    clearHistory
+    clearHistory,
+    recordClick,
+    createShareLink
   };
 }
 var optimisticCounter = 0;
@@ -1981,7 +2030,10 @@ function logoUrlOf(url) {
     return null;
   }
 }
-function ReferenceCard({ reference }) {
+function ReferenceCard({
+  reference,
+  onFollow
+}) {
   const [imageFailed, setImageFailed] = useState(false);
   const [logoFailed, setLogoFailed] = useState(false);
   const host = hostnameOf(reference.url);
@@ -2003,9 +2055,11 @@ function ReferenceCard({ reference }) {
     "a",
     {
       "data-boff-explore": "reference",
+      "data-index": reference.index ?? void 0,
       href: reference.url,
       target: "_blank",
       rel: "noopener noreferrer",
+      onClick: () => onFollow?.(reference.url),
       className: "group flex flex-row items-center gap-3 overflow-hidden rounded-xl border border-border bg-card p-2 transition-colors hover:border-primary/40 hover:bg-accent/40 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring sm:flex-col sm:items-stretch sm:gap-0 sm:p-0",
       children: [
         /* @__PURE__ */ jsx("div", { className: "relative h-11 w-11 shrink-0 overflow-hidden rounded-lg bg-muted sm:hidden", children: logoImg }),
@@ -2029,7 +2083,10 @@ function ReferenceCard({ reference }) {
           }
         ) }) : letterPlate }),
         /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-0.5 sm:gap-1.5 sm:p-3", children: [
-          /* @__PURE__ */ jsx("p", { className: "line-clamp-2 text-sm font-semibold leading-snug text-card-foreground", children: reference.title || host || reference.url }),
+          /* @__PURE__ */ jsxs("p", { className: "line-clamp-2 text-sm font-semibold leading-snug text-card-foreground", children: [
+            reference.index ? /* @__PURE__ */ jsx("span", { className: "mr-1.5 inline-flex h-4 min-w-4 items-center justify-center rounded bg-primary/10 px-1 text-[10px] font-bold text-primary", children: reference.index }) : null,
+            reference.title || host || reference.url
+          ] }),
           reference.description ? /* @__PURE__ */ jsx("p", { className: "line-clamp-2 text-xs leading-relaxed text-muted-foreground max-sm:hidden", children: reference.description }) : null,
           /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 sm:mt-auto sm:pt-2", children: [
             reference.product ? /* @__PURE__ */ jsx("span", { className: "rounded-full bg-secondary px-2 py-0.5 text-xs font-medium text-secondary-foreground max-sm:hidden", children: reference.product }) : null,
@@ -2045,7 +2102,8 @@ function ReferenceCard({ reference }) {
 }
 function CtaButton({
   cta,
-  onNavigate
+  onNavigate,
+  onFollow
 }) {
   const variant = CTA_VARIANTS[cta.kind] ?? "outline";
   const internal = isInternalPath(cta.url);
@@ -2058,7 +2116,10 @@ function CtaButton({
         type: "button",
         size: "sm",
         variant,
-        onClick: () => onNavigate(cta.url),
+        onClick: () => {
+          onFollow?.(cta.url);
+          onNavigate(cta.url);
+        },
         children: cta.label
       }
     );
@@ -2069,6 +2130,7 @@ function CtaButton({
       "data-boff-explore": "cta",
       "data-kind": cta.kind,
       href: cta.url,
+      onClick: () => onFollow?.(cta.url),
       ...internal ? {} : { target: "_blank", rel: "noopener noreferrer" },
       children: [
         cta.label,
@@ -2120,7 +2182,9 @@ function AssistantBubble({
   message,
   activity,
   onNavigate,
-  anchorRef
+  anchorRef,
+  onFollow,
+  onFollowUp
 }) {
   const streaming = message.status === "PENDING" || message.status === "RUNNING";
   const body = message.content || message.partialContent || "";
@@ -2142,6 +2206,34 @@ function AssistantBubble({
           }
         ),
         /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1 space-y-3", children: [
+          message.status === "COMPLETED" && message.answered === false ? /* @__PURE__ */ jsxs(
+            "div",
+            {
+              "data-boff-explore": "no-answer",
+              className: "flex items-start gap-2 rounded-xl border border-amber-500/30 bg-amber-500/10 px-3 py-2 text-xs leading-relaxed text-foreground",
+              children: [
+                /* @__PURE__ */ jsx(TriangleAlert, { className: "mt-0.5 h-3.5 w-3.5 shrink-0 text-amber-600 dark:text-amber-400" }),
+                /* @__PURE__ */ jsxs("span", { children: [
+                  "I couldn't find this in our documentation, so the answer below is not grounded in a source. Try rephrasing, or",
+                  " ",
+                  /* @__PURE__ */ jsx(
+                    "a",
+                    {
+                      href: "/contact",
+                      className: "underline underline-offset-2 hover:text-primary",
+                      onClick: (event) => {
+                        if (!onNavigate) return;
+                        event.preventDefault();
+                        onNavigate("/contact");
+                      },
+                      children: "ask a human"
+                    }
+                  ),
+                  "."
+                ] })
+              ]
+            }
+          ) : null,
           body ? /* @__PURE__ */ jsxs("div", { className: "rounded-2xl rounded-tl-md border border-border bg-card px-4 py-3 shadow-sm", children: [
             /* @__PURE__ */ jsx("div", { className: "boff-prose boff-prose-sm boff-explore-body min-w-0 text-card-foreground", children: /* @__PURE__ */ jsx(Markdown, { children: body }) }),
             streaming ? /* @__PURE__ */ jsx("span", { className: "boff-explore-caret", "aria-hidden": "true" }) : null
@@ -2150,16 +2242,41 @@ function AssistantBubble({
           failed && !body ? /* @__PURE__ */ jsx("div", { className: "rounded-2xl rounded-tl-md border border-border bg-muted px-4 py-3 text-sm text-muted-foreground", children: "That answer didn't come through. Try asking again." }) : null,
           message.references.length > 0 ? /* @__PURE__ */ jsxs("div", { children: [
             /* @__PURE__ */ jsx("p", { className: "mb-2 text-xs font-semibold uppercase tracking-wide text-muted-foreground", children: "Sources" }),
-            /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3", children: message.references.map((reference) => /* @__PURE__ */ jsx(ReferenceCard, { reference }, reference.url)) })
+            /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3", children: message.references.map((reference) => /* @__PURE__ */ jsx(
+              ReferenceCard,
+              {
+                reference,
+                onFollow: (url) => onFollow?.("REFERENCE", url)
+              },
+              reference.url
+            )) })
           ] }) : null,
           message.ctas.length > 0 ? /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-2 pt-0.5", children: message.ctas.map((cta) => /* @__PURE__ */ jsx(
             CtaButton,
             {
               cta,
-              onNavigate
+              onNavigate,
+              onFollow: (url) => onFollow?.("CTA", url)
             },
             `${cta.kind}-${cta.url}`
-          )) }) : null
+          )) }) : null,
+          message.status === "COMPLETED" && (message.followUps?.length ?? 0) > 0 ? /* @__PURE__ */ jsxs("div", { className: "space-y-1.5 pt-0.5", children: [
+            /* @__PURE__ */ jsx("p", { className: "text-xs font-medium text-muted-foreground", children: "Next you could ask" }),
+            /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1.5", children: (message.followUps ?? []).map((question) => /* @__PURE__ */ jsxs(
+              "button",
+              {
+                "data-boff-explore": "follow-up",
+                type: "button",
+                onClick: () => onFollowUp?.(question),
+                className: "group inline-flex max-w-full items-center gap-1.5 rounded-full border border-border bg-card px-3 py-1 text-left text-xs text-card-foreground transition-colors hover:border-primary/40 hover:bg-accent focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
+                children: [
+                  /* @__PURE__ */ jsx("span", { className: "truncate", children: question }),
+                  /* @__PURE__ */ jsx(ArrowUp, { className: "h-3 w-3 shrink-0 rotate-45 text-muted-foreground transition-colors group-hover:text-primary" })
+                ]
+              },
+              question
+            )) })
+          ] }) : null
         ] })
       ]
     }
@@ -2233,6 +2350,9 @@ function PromptCarousel({
     "div",
     {
       className: "flex min-w-0 items-center gap-1.5",
+      role: "group",
+      "aria-roledescription": "carousel",
+      "aria-label": "Example questions",
       onMouseEnter: () => setPaused(true),
       onMouseLeave: () => setPaused(false),
       onFocusCapture: () => setPaused(true),
@@ -2255,6 +2375,8 @@ function PromptCarousel({
             "data-chip-kind": "prompt",
             type: "button",
             disabled,
+            "aria-label": `Ask: ${current}`,
+            "aria-live": paused ? "polite" : "off",
             onClick: () => onPrompt(current),
             className: "boff-explore-fade group flex min-w-0 flex-1 items-center gap-2 rounded-full border border-border bg-card px-4 py-2 text-left text-sm text-card-foreground shadow-sm transition-colors hover:border-primary/50 hover:bg-accent disabled:cursor-not-allowed disabled:opacity-50 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
             children: [
@@ -2289,72 +2411,108 @@ function ProductStrip({
     "shrink-0 rounded-full border px-3 py-1 text-xs font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
     active ? "border-primary bg-primary text-primary-foreground" : "border-border bg-card text-muted-foreground hover:bg-accent hover:text-accent-foreground"
   );
-  return /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-center gap-2", children: [
-    /* @__PURE__ */ jsxs(
-      "div",
-      {
-        className: cn(
-          "boff-explore-strip flex min-w-0 flex-1 gap-2",
-          expanded ? "flex-wrap" : "flex-nowrap overflow-x-auto"
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "flex min-w-0 items-center gap-2",
+      role: "group",
+      "aria-label": "Focus the assistant on one product",
+      children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "boff-explore-strip flex min-w-0 flex-1 gap-2",
+              expanded ? "flex-wrap" : "flex-nowrap overflow-x-auto"
+            ),
+            children: [
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  "data-boff-explore": "chip",
+                  "data-chip-kind": "product",
+                  "data-product": "all",
+                  type: "button",
+                  "aria-pressed": focusProduct === null,
+                  onClick: () => onFocus(null),
+                  className: chipClass(focusProduct === null),
+                  children: "All products"
+                }
+              ),
+              products.map((product) => /* @__PURE__ */ jsx(
+                "button",
+                {
+                  "data-boff-explore": "chip",
+                  "data-chip-kind": "product",
+                  "data-product": product.slug,
+                  type: "button",
+                  "aria-pressed": focusProduct === product.slug,
+                  title: product.tagline ?? product.name,
+                  onClick: () => onFocus(focusProduct === product.slug ? null : product.slug),
+                  className: chipClass(focusProduct === product.slug),
+                  children: product.name
+                },
+                product.slug
+              ))
+            ]
+          }
         ),
-        children: [
-          /* @__PURE__ */ jsx(
-            "button",
-            {
-              "data-boff-explore": "chip",
-              "data-chip-kind": "product",
-              "data-product": "all",
-              type: "button",
-              "aria-pressed": focusProduct === null,
-              onClick: () => onFocus(null),
-              className: chipClass(focusProduct === null),
-              children: "All products"
-            }
-          ),
-          products.map((product) => /* @__PURE__ */ jsx(
-            "button",
-            {
-              "data-boff-explore": "chip",
-              "data-chip-kind": "product",
-              "data-product": product.slug,
-              type: "button",
-              "aria-pressed": focusProduct === product.slug,
-              title: product.tagline ?? product.name,
-              onClick: () => onFocus(focusProduct === product.slug ? null : product.slug),
-              className: chipClass(focusProduct === product.slug),
-              children: product.name
-            },
-            product.slug
-          ))
-        ]
-      }
-    ),
-    products.length > 0 ? /* @__PURE__ */ jsx(
-      "button",
-      {
-        type: "button",
-        "data-boff-explore": "products-toggle",
-        onClick: () => setExpanded((v) => !v),
-        className: "shrink-0 whitespace-nowrap rounded-full px-2 py-1 text-xs font-medium text-primary underline-offset-4 hover:underline focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
-        children: expanded ? "Show less" : `All ${products.length}`
-      }
-    ) : null
-  ] });
+        products.length > 0 ? /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            "data-boff-explore": "products-toggle",
+            "aria-expanded": expanded,
+            onClick: () => setExpanded((v) => !v),
+            className: "shrink-0 whitespace-nowrap rounded-full px-2 py-1 text-xs font-medium text-primary underline-offset-4 hover:underline focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
+            children: expanded ? "Show less" : `All ${products.length}`
+          }
+        ) : null
+      ]
+    }
+  );
 }
 function DisclaimerDialog({
   open,
   onClose,
   captchaOn
 }) {
+  const panelRef = useRef(null);
   const closeRef = useRef(null);
+  const titleId = "boff-explore-disclaimer-title";
   useEffect(() => {
     if (!open) return;
+    const opener = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+    const focusable = () => Array.from(
+      panelRef.current?.querySelectorAll(
+        'a[href], button:not([disabled]), textarea, input, select, [tabindex]:not([tabindex="-1"])'
+      ) ?? []
+    );
     const onKey = (event) => {
-      if (event.key === "Escape") onClose();
+      if (event.key === "Escape") {
+        onClose();
+        return;
+      }
+      if (event.key !== "Tab") return;
+      const items = focusable();
+      if (items.length === 0) return;
+      const first = items[0];
+      const last = items[items.length - 1];
+      const active = document.activeElement;
+      if (event.shiftKey && (active === first || !panelRef.current?.contains(active))) {
+        event.preventDefault();
+        last?.focus();
+      } else if (!event.shiftKey && active === last) {
+        event.preventDefault();
+        first?.focus();
+      }
     };
     document.addEventListener("keydown", onKey);
     closeRef.current?.focus();
-    return () => document.removeEventListener("keydown", onKey);
+    return () => {
+      document.removeEventListener("keydown", onKey);
+      opener?.focus();
+    };
   }, [open, onClose]);
   if (!open) return null;
   return /* @__PURE__ */ jsx(
@@ -2363,19 +2521,34 @@ function DisclaimerDialog({
       "data-boff-explore": "disclaimer-dialog",
       role: "dialog",
       "aria-modal": "true",
-      "aria-label": "How this assistant works",
+      "aria-labelledby": titleId,
       className: "fixed inset-0 z-50 flex items-end justify-center bg-foreground/40 p-4 backdrop-blur-sm sm:items-center",
       onClick: onClose,
       children: /* @__PURE__ */ jsxs(
         "div",
         {
+          ref: panelRef,
           className: "w-full max-w-md rounded-2xl border border-border bg-card p-5 shadow-xl",
           onClick: (event) => event.stopPropagation(),
           children: [
             /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3", children: [
-              /* @__PURE__ */ jsx("span", { className: "flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-primary/10 text-primary", children: /* @__PURE__ */ jsx(TriangleAlert, { className: "h-4 w-4" }) }),
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  "aria-hidden": "true",
+                  className: "flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-primary/10 text-primary",
+                  children: /* @__PURE__ */ jsx(TriangleAlert, { className: "h-4 w-4" })
+                }
+              ),
               /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
-                /* @__PURE__ */ jsx("p", { className: "text-sm font-semibold text-card-foreground", children: "How this assistant works" }),
+                /* @__PURE__ */ jsx(
+                  "p",
+                  {
+                    id: titleId,
+                    className: "text-sm font-semibold text-card-foreground",
+                    children: "How this assistant works"
+                  }
+                ),
                 /* @__PURE__ */ jsxs("div", { className: "mt-2 space-y-2 text-xs leading-relaxed text-muted-foreground", children: [
                   /* @__PURE__ */ jsx("p", { children: "Answers are generated from our public documentation and can be imperfect \u2014 check anything important against the linked sources." }),
                   /* @__PURE__ */ jsx("p", { children: "Conversations are saved in this browser so you can come back to them, and are also stored on our servers to help us improve these answers. Please don't share personal or confidential information." }),
@@ -2487,7 +2660,9 @@ function ExplorePage({
     history,
     openConversation,
     deleteConversation,
-    clearHistory
+    clearHistory,
+    recordClick,
+    createShareLink
   } = useExploreChat({ productSlug, pageUrl, onSend, examplePrompts });
   const [draft, setDraft] = useState("");
   const textareaRef = useRef(null);
@@ -2507,6 +2682,7 @@ function ExplorePage({
   });
   speechStopRef.current = speech.stop;
   const [disclaimerOpen, setDisclaimerOpen] = useState(false);
+  const [shareLabel, setShareLabel] = useState("Share");
   const scrollRef = useRef(null);
   const latestAssistantRef = useRef(null);
   const alignedForRef = useRef(null);
@@ -2561,6 +2737,25 @@ function ExplorePage({
     if (!el) return;
     el.scrollTop = el.scrollHeight;
   }, [activity, latestAssistantId, messages]);
+  const handleShare = useCallback(async () => {
+    setShareLabel("Copying\u2026");
+    const token = await createShareLink();
+    if (!token) {
+      setShareLabel("Unavailable");
+      setTimeout(() => setShareLabel("Share"), 2500);
+      return;
+    }
+    const base = (pageUrl ?? window.location.href).split("?")[0];
+    const url = `${base}?c=${encodeURIComponent(token)}`;
+    try {
+      await navigator.clipboard.writeText(url);
+      setShareLabel("Copied");
+    } catch {
+      window.prompt("Copy this link", url);
+      setShareLabel("Share");
+    }
+    setTimeout(() => setShareLabel("Share"), 2500);
+  }, [createShareLink, pageUrl]);
   const submitDraft = useCallback(() => {
     const text = draft.trim();
     if (!text || overLimit || busy || !canSend) return;
@@ -2643,6 +2838,24 @@ function ExplorePage({
               ]
             }
           ),
+          messages.length > 0 ? /* @__PURE__ */ jsxs(
+            Button,
+            {
+              "data-boff-explore": "share",
+              type: "button",
+              size: "sm",
+              variant: "ghost",
+              className: "shrink-0 text-muted-foreground",
+              title: "Copy a read-only link to this conversation",
+              onClick: () => {
+                void handleShare();
+              },
+              children: [
+                /* @__PURE__ */ jsx(Link2, { className: "h-3.5 w-3.5" }),
+                /* @__PURE__ */ jsx("span", { className: "hidden sm:inline", children: shareLabel })
+              ]
+            }
+          ) : null,
           history.length > 0 ? /* @__PURE__ */ jsxs(
             Button,
             {
@@ -2761,7 +2974,9 @@ function ExplorePage({
                   message,
                   activity,
                   onNavigate,
-                  anchorRef: message.id === latestAssistantId ? latestAssistantRef : void 0
+                  anchorRef: message.id === latestAssistantId ? latestAssistantRef : void 0,
+                  onFollow: (kind, url) => recordClick(message.id, kind, url),
+                  onFollowUp: sendPrompt
                 },
                 message.id
               )