@burdenoff/website-sdk 2026.828.4 → 2026.828.5

package/dist/components/explore.mjs

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { createContext, useMemo, useState, useRef, useEffect, useCallback, useContext } from 'react';
-import { Sparkles, RotateCcw, Square, ArrowUp, BookOpenText, Layers, Link2, TriangleAlert, ExternalLink } from 'lucide-react';
+import { createContext, useMemo, useState, useRef, useCallback, useEffect, useContext } from 'react';
+import { Sparkles, RotateCcw, History, Trash2, Mic, Square, ArrowUp, BookOpenText, Layers, Link2, TriangleAlert, ExternalLink } from 'lucide-react';
 import ReactMarkdown from 'react-markdown';
 import rehypeSanitize from 'rehype-sanitize';
 import remarkGfm from 'remark-gfm';
@@ -780,6 +780,8 @@ async function getRecaptchaV3Token(siteKey, action = EXPLORE_RECAPTCHA_ACTION) {
 
 // src/hooks/use-explore-chat.ts
 var DEFAULT_STORAGE_KEY = "boff.explore.v1";
+var HISTORY_SUFFIX = ".history";
+var MAX_ARCHIVED_CONVERSATIONS = 15;
 var DEFAULT_POLL_INTERVAL_MS = 1500;
 var DEFAULT_POLL_TIMEOUT_MS = 9e4;
 var POLL_REQUEST_TIMEOUT_MS = 1e4;
@@ -918,10 +920,58 @@ function classifyExploreError(code, serverMessage) {
     retryable: true
   };
 }
+function historyKey(key) {
+  return `${key}${HISTORY_SUFFIX}`;
+}
+function readArchive(key) {
+  if (typeof window === "undefined") return [];
+  try {
+    const raw = window.localStorage.getItem(historyKey(key));
+    if (!raw) return [];
+    const parsed = JSON.parse(raw);
+    if (!Array.isArray(parsed)) return [];
+    return parsed.filter(
+      (entry) => typeof entry === "object" && entry !== null && typeof entry.token === "string" && Array.isArray(entry.messages)
+    );
+  } catch {
+    return [];
+  }
+}
+function writeArchive(key, entries) {
+  if (typeof window === "undefined") return;
+  try {
+    if (entries.length === 0) {
+      window.localStorage.removeItem(historyKey(key));
+      return;
+    }
+    window.localStorage.setItem(historyKey(key), JSON.stringify(entries));
+  } catch {
+  }
+}
+function upsertArchive(key, thread) {
+  if (!thread.token) return readArchive(key);
+  const real = thread.messages.filter(
+    (m) => m.content.trim() !== "" || m.role === "USER"
+  );
+  if (real.length === 0) return readArchive(key);
+  const firstUser = real.find((m) => m.role === "USER");
+  const entry = {
+    token: thread.token,
+    title: (firstUser?.content ?? "Conversation").trim().slice(0, 80),
+    updatedAt: real[real.length - 1]?.createdAt ?? (/* @__PURE__ */ new Date()).toISOString(),
+    messageCount: real.length,
+    focusProduct: thread.focusProduct,
+    messages: real.slice(-20)
+  };
+  const rest = readArchive(key).filter((e) => e.token !== entry.token);
+  const next = [entry, ...rest].slice(0, MAX_ARCHIVED_CONVERSATIONS);
+  writeArchive(key, next);
+  return next;
+}
 function readPersisted(key) {
   if (typeof window === "undefined") return null;
   try {
-    const raw = window.sessionStorage.getItem(key);
+    const raw = window.localStorage.getItem(key);
     if (!raw) return null;
     const parsed = JSON.parse(raw);
     if (!parsed || typeof parsed !== "object") return null;
@@ -966,6 +1016,8 @@ function useExploreChat(options = {}) {
   const [remainingToday, setRemainingToday] = useState(null);
   const [focusProduct, setFocusProductState] = useState(null);
   const [turnCount, setTurnCount] = useState(0);
+  const messagesRef = useRef([]);
+  const [archive, setArchive] = useState([]);
   const [hydrated, setHydrated] = useState(false);
   const mountedRef = useRef(true);
   const pollGenerationRef = useRef(0);
@@ -1003,6 +1055,7 @@ function useExploreChat(options = {}) {
       setHydrated(true);
       return;
     }
+    setArchive(readArchive(storageKey));
     const stored = readPersisted(storageKey);
     if (stored) {
       conversationTokenRef.current = stored.conversationToken;
@@ -1031,13 +1084,28 @@ function useExploreChat(options = {}) {
         focusProduct
       };
       if (!payload.conversationToken && payload.messages.length === 0 && !payload.focusProduct) {
-        window.sessionStorage.removeItem(storageKey);
+        window.localStorage.removeItem(storageKey);
         return;
       }
-      window.sessionStorage.setItem(storageKey, JSON.stringify(payload));
+      window.localStorage.setItem(storageKey, JSON.stringify(payload));
     } catch {
     }
   }, [persist, hydrated, storageKey, messages, focusProduct]);
+  useEffect(() => {
+    messagesRef.current = messages;
+    if (!persist || !hydrated) return;
+    const settled = messages.some(
+      (m) => m.role === "ASSISTANT" && (m.status === "COMPLETED" || m.status === "FAILED")
+    );
+    if (!settled) return;
+    setArchive(
+      upsertArchive(storageKey, {
+        token: conversationTokenRef.current,
+        messages,
+        focusProduct: focusProductRef.current
+      })
+    );
+  }, [messages, persist, hydrated, storageKey]);
   useEffect(() => {
     let cancelled = false;
     const load = async () => {
@@ -1323,6 +1391,13 @@ function useExploreChat(options = {}) {
     void send(text);
   }, [cancelPolling, send]);
   const reset = useCallback(() => {
+    setArchive(
+      upsertArchive(storageKey, {
+        token: conversationTokenRef.current,
+        messages: messagesRef.current,
+        focusProduct: focusProductRef.current
+      })
+    );
     cancelPolling();
     inFlightRef.current = false;
     conversationTokenRef.current = null;
@@ -1335,11 +1410,48 @@ function useExploreChat(options = {}) {
     setPhase(catalogRef.current.enabled ? "ready" : "disabled");
     if (typeof window !== "undefined") {
       try {
-        window.sessionStorage.removeItem(storageKey);
+        window.localStorage.removeItem(storageKey);
       } catch {
       }
     }
   }, [cancelPolling, storageKey]);
+  const openConversation = useCallback(
+    (token) => {
+      const entry = readArchive(storageKey).find((e) => e.token === token);
+      if (!entry) return;
+      upsertArchive(storageKey, {
+        token: conversationTokenRef.current,
+        messages: messagesRef.current,
+        focusProduct: focusProductRef.current
+      });
+      cancelPolling();
+      inFlightRef.current = false;
+      conversationTokenRef.current = entry.token;
+      turnCountRef.current = entry.messages.filter(
+        (m) => m.role === "USER"
+      ).length;
+      setTurnCount(turnCountRef.current);
+      setMessages(entry.messages);
+      focusProductRef.current = entry.focusProduct;
+      setFocusProductState(entry.focusProduct);
+      setError(null);
+      setPhase(catalogRef.current.enabled ? "ready" : "disabled");
+      setArchive(readArchive(storageKey));
+    },
+    [cancelPolling, storageKey]
+  );
+  const deleteConversation = useCallback(
+    (token) => {
+      const next = readArchive(storageKey).filter((e) => e.token !== token);
+      writeArchive(storageKey, next);
+      setArchive(next);
+    },
+    [storageKey]
+  );
+  const clearHistory = useCallback(() => {
+    writeArchive(storageKey, []);
+    setArchive([]);
+  }, [storageKey]);
   const setFocusProduct = useCallback((slug) => {
     focusProductRef.current = slug;
     setFocusProductState(slug);
@@ -1368,7 +1480,11 @@ function useExploreChat(options = {}) {
     stop,
     retry,
     reset,
-    canSend
+    canSend,
+    history: archive,
+    openConversation,
+    deleteConversation,
+    clearHistory
   };
 }
 var optimisticCounter = 0;
@@ -1376,6 +1492,119 @@ function makeOptimisticId() {
   optimisticCounter += 1;
   return `boff-explore-local-${Date.now()}-${optimisticCounter}`;
 }
+function getRecognitionCtor() {
+  if (typeof window === "undefined") return null;
+  const w = window;
+  return w.SpeechRecognition ?? w.webkitSpeechRecognition ?? null;
+}
+function describeError(code) {
+  switch (code) {
+    case "not-allowed":
+    case "service-not-allowed":
+      return "Microphone access was blocked. Allow it in your browser's site settings to dictate.";
+    case "no-speech":
+      return "I didn't catch anything \u2014 try again a little closer to the mic.";
+    case "audio-capture":
+      return "No microphone was found.";
+    case "network":
+      return "Speech recognition needs a network connection.";
+    case "aborted":
+      return "";
+    default:
+      return "Dictation stopped unexpectedly. You can type instead.";
+  }
+}
+function useSpeechInput({
+  onFinalTranscript,
+  lang,
+  onError
+}) {
+  const [supported] = useState(() => getRecognitionCtor() !== null);
+  const [listening, setListening] = useState(false);
+  const [interim, setInterim] = useState("");
+  const [error, setError] = useState(null);
+  const recognitionRef = useRef(null);
+  const finalRef = useRef(onFinalTranscript);
+  const errorRef = useRef(onError);
+  finalRef.current = onFinalTranscript;
+  errorRef.current = onError;
+  const stop = useCallback(() => {
+    const recognition = recognitionRef.current;
+    if (!recognition) return;
+    try {
+      recognition.stop();
+    } catch {
+    }
+    setListening(false);
+    setInterim("");
+  }, []);
+  const start = useCallback(() => {
+    const Ctor = getRecognitionCtor();
+    if (!Ctor) return;
+    if (recognitionRef.current) stop();
+    const recognition = new Ctor();
+    recognition.lang = lang ?? (typeof navigator === "undefined" ? "en-US" : navigator.language || "en-US");
+    recognition.continuous = true;
+    recognition.interimResults = true;
+    recognition.maxAlternatives = 1;
+    recognition.onstart = () => {
+      setError(null);
+      setListening(true);
+    };
+    recognition.onresult = (event) => {
+      let settled = "";
+      let pending = "";
+      for (let i = event.resultIndex; i < event.results.length; i += 1) {
+        const result = event.results[i];
+        if (!result) continue;
+        const text = result[0]?.transcript ?? "";
+        if (result.isFinal) settled += text;
+        else pending += text;
+      }
+      setInterim(pending);
+      if (settled.trim() !== "") finalRef.current(settled);
+    };
+    recognition.onerror = (event) => {
+      const message = describeError(event.error);
+      setListening(false);
+      setInterim("");
+      if (message !== "") {
+        setError(message);
+        errorRef.current?.(message);
+      }
+    };
+    recognition.onend = () => {
+      setListening(false);
+      setInterim("");
+    };
+    recognitionRef.current = recognition;
+    try {
+      recognition.start();
+    } catch {
+      setListening(false);
+    }
+  }, [lang, stop]);
+  const toggle = useCallback(() => {
+    if (listening) stop();
+    else start();
+  }, [listening, start, stop]);
+  useEffect(
+    () => () => {
+      const recognition = recognitionRef.current;
+      if (!recognition) return;
+      recognition.onresult = null;
+      recognition.onerror = null;
+      recognition.onend = null;
+      recognition.onstart = null;
+      try {
+        recognition.abort();
+      } catch {
+      }
+    },
+    []
+  );
+  return { supported, listening, interim, error, start, stop, toggle };
+}
 function canonicalFromLocation() {
   if (typeof window === "undefined" || !window.location) return void 0;
   const { origin, pathname } = window.location;
@@ -1928,10 +2157,29 @@ function ExplorePage({
     stop,
     retry,
     reset,
-    canSend
+    canSend,
+    history,
+    openConversation,
+    deleteConversation,
+    clearHistory
   } = useExploreChat({ productSlug, pageUrl, onSend, examplePrompts });
   const [draft, setDraft] = useState("");
   const textareaRef = useRef(null);
+  const [historyOpen, setHistoryOpen] = useState(false);
+  const speechStopRef = useRef(() => void 0);
+  const stopDictation = useCallback(() => {
+    speechStopRef.current();
+  }, []);
+  const speech = useSpeechInput({
+    onFinalTranscript: (text) => {
+      setDraft((current) => {
+        const joined = current.trim() === "" ? text.trimStart() : `${current.trimEnd()} ${text.trim()}`;
+        return joined;
+      });
+      textareaRef.current?.focus();
+    }
+  });
+  speechStopRef.current = speech.stop;
   const scrollRef = useRef(null);
   const stickToBottomRef = useRef(true);
   const composingRef = useRef(false);
@@ -1967,11 +2215,12 @@ function ExplorePage({
   const submitDraft = useCallback(() => {
     const text = draft.trim();
     if (!text || overLimit || busy || !canSend) return;
+    stopDictation();
     setDraft("");
     stickToBottomRef.current = true;
     void send(text);
     textareaRef.current?.focus();
-  }, [busy, canSend, draft, overLimit, send]);
+  }, [busy, canSend, draft, overLimit, send, stopDictation]);
   const sendPrompt = useCallback(
     (prompt) => {
       if (!canSend || busy) return;
@@ -2044,8 +2293,96 @@ function ExplorePage({
                 /* @__PURE__ */ jsx("span", { className: "hidden sm:inline", children: "New chat" })
               ]
             }
-          )
+          ),
+          history.length > 0 ? /* @__PURE__ */ jsxs(
+            Button,
+            {
+              "data-boff-explore": "history-toggle",
+              type: "button",
+              size: "sm",
+              variant: "ghost",
+              className: "shrink-0 text-muted-foreground",
+              "aria-expanded": historyOpen,
+              onClick: () => {
+                setHistoryOpen((open) => !open);
+              },
+              children: [
+                /* @__PURE__ */ jsx(History, { className: "h-3.5 w-3.5" }),
+                /* @__PURE__ */ jsxs("span", { className: "hidden sm:inline", children: [
+                  "History (",
+                  history.length,
+                  ")"
+                ] })
+              ]
+            }
+          ) : null
         ] }) : null,
+        historyOpen && history.length > 0 ? /* @__PURE__ */ jsx(
+          "div",
+          {
+            "data-boff-explore": "history-panel",
+            className: "border-b border-border bg-muted/30 px-4 py-3",
+            children: /* @__PURE__ */ jsxs("div", { className: "mx-auto w-full max-w-3xl", children: [
+              /* @__PURE__ */ jsxs("div", { className: "mb-2 flex items-center justify-between gap-2", children: [
+                /* @__PURE__ */ jsx("p", { className: "text-xs font-semibold uppercase tracking-wide text-muted-foreground", children: "Your recent conversations" }),
+                /* @__PURE__ */ jsxs(
+                  Button,
+                  {
+                    "data-boff-explore": "history-clear",
+                    type: "button",
+                    size: "sm",
+                    variant: "ghost",
+                    className: "h-7 shrink-0 text-xs text-muted-foreground hover:text-destructive",
+                    onClick: () => {
+                      clearHistory();
+                      setHistoryOpen(false);
+                    },
+                    children: [
+                      /* @__PURE__ */ jsx(Trash2, { className: "h-3.5 w-3.5" }),
+                      "Clear history"
+                    ]
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsx("ul", { className: "space-y-1", children: history.map((entry) => /* @__PURE__ */ jsxs("li", { className: "flex items-center gap-1", children: [
+                /* @__PURE__ */ jsxs(
+                  "button",
+                  {
+                    "data-boff-explore": "history-item",
+                    type: "button",
+                    className: "flex-1 truncate rounded-md px-2 py-1.5 text-left text-sm text-foreground transition-colors hover:bg-accent hover:text-accent-foreground",
+                    onClick: () => {
+                      openConversation(entry.token);
+                      setHistoryOpen(false);
+                    },
+                    children: [
+                      /* @__PURE__ */ jsx("span", { className: "truncate", children: entry.title }),
+                      /* @__PURE__ */ jsxs("span", { className: "ml-2 text-xs text-muted-foreground", children: [
+                        entry.messageCount,
+                        " message",
+                        entry.messageCount === 1 ? "" : "s"
+                      ] })
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    type: "button",
+                    size: "icon",
+                    variant: "ghost",
+                    className: "h-7 w-7 shrink-0 text-muted-foreground hover:text-destructive",
+                    "aria-label": `Delete conversation: ${entry.title}`,
+                    onClick: () => {
+                      deleteConversation(entry.token);
+                    },
+                    children: /* @__PURE__ */ jsx(Trash2, { className: "h-3.5 w-3.5" })
+                  }
+                )
+              ] }, entry.token)) })
+            ] })
+          }
+        ) : null,
         /* @__PURE__ */ jsx(
           "div",
           {
@@ -2120,6 +2457,23 @@ function ExplorePage({
                         className: "max-h-[200px] min-h-[44px] flex-1 resize-none border-0 bg-transparent px-2 py-2.5 text-sm shadow-none focus-visible:ring-0 md:text-sm"
                       }
                     ),
+                    speech.supported ? /* @__PURE__ */ jsx(
+                      Button,
+                      {
+                        "data-boff-explore": "mic",
+                        "data-listening": speech.listening ? "true" : "false",
+                        type: "button",
+                        size: "icon",
+                        variant: speech.listening ? "default" : "ghost",
+                        disabled: composerDisabled,
+                        "aria-label": speech.listening ? "Stop dictating" : "Dictate your question",
+                        "aria-pressed": speech.listening,
+                        title: speech.listening ? "Stop dictating" : "Dictate your question",
+                        onClick: speech.toggle,
+                        className: cn(speech.listening && "animate-pulse"),
+                        children: /* @__PURE__ */ jsx(Mic, { className: "h-4 w-4" })
+                      }
+                    ) : null,
                     busy ? /* @__PURE__ */ jsx(
                       Button,
                       {
@@ -2145,6 +2499,29 @@ function ExplorePage({
                   ]
                 }
               ),
+              speech.listening || speech.interim !== "" ? /* @__PURE__ */ jsxs(
+                "p",
+                {
+                  "data-boff-explore": "dictation",
+                  className: "mt-2 flex items-center gap-2 text-xs text-muted-foreground",
+                  "aria-live": "polite",
+                  children: [
+                    /* @__PURE__ */ jsxs("span", { className: "relative flex h-2 w-2 shrink-0", children: [
+                      /* @__PURE__ */ jsx("span", { className: "absolute inline-flex h-full w-full animate-ping rounded-full bg-primary opacity-75" }),
+                      /* @__PURE__ */ jsx("span", { className: "relative inline-flex h-2 w-2 rounded-full bg-primary" })
+                    ] }),
+                    /* @__PURE__ */ jsx("span", { className: "italic", children: speech.interim !== "" ? speech.interim : "Listening\u2026" })
+                  ]
+                }
+              ) : null,
+              speech.error !== null ? /* @__PURE__ */ jsx(
+                "p",
+                {
+                  "data-boff-explore": "dictation-error",
+                  className: "mt-2 text-xs text-destructive",
+                  children: speech.error
+                }
+              ) : null,
               /* @__PURE__ */ jsxs("div", { className: "mt-2 flex flex-wrap items-center gap-x-3 gap-y-1 text-xs text-muted-foreground", children: [
                 /* @__PURE__ */ jsx("span", { className: "hidden sm:inline", children: "Enter to send \xB7 Shift + Enter for a new line" }),
                 remainingToday !== null ? /* @__PURE__ */ jsxs("span", { "data-boff-explore": "remaining", children: [
@@ -2168,39 +2545,48 @@ function ExplorePage({
                   }
                 )
               ] }),
-              /* @__PURE__ */ jsxs("p", { className: "mt-2 text-xs leading-relaxed text-muted-foreground", children: [
-                "Answers are generated from our public documentation and can be imperfect \u2014 check anything important against the linked sources.",
-                captchaOn ? /* @__PURE__ */ jsxs(Fragment, { children: [
-                  " ",
-                  "This site is protected by reCAPTCHA; the Google",
-                  " ",
-                  /* @__PURE__ */ jsx(
-                    "a",
-                    {
-                      href: "https://policies.google.com/privacy",
-                      target: "_blank",
-                      rel: "noopener noreferrer",
-                      className: "underline underline-offset-2 hover:text-foreground",
-                      children: "Privacy Policy"
-                    }
-                  ),
-                  " ",
-                  "and",
-                  " ",
-                  /* @__PURE__ */ jsx(
-                    "a",
-                    {
-                      href: "https://policies.google.com/terms",
-                      target: "_blank",
-                      rel: "noopener noreferrer",
-                      className: "underline underline-offset-2 hover:text-foreground",
-                      children: "Terms of Service"
-                    }
-                  ),
-                  " ",
-                  "apply."
-                ] }) : null
-              ] })
+              /* @__PURE__ */ jsxs(
+                "p",
+                {
+                  "data-boff-explore": "disclaimer",
+                  className: "mt-2 text-xs leading-relaxed text-muted-foreground",
+                  children: [
+                    "Answers are generated from our public documentation and can be imperfect \u2014 check anything important against the linked sources.",
+                    " ",
+                    "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.",
+                    captchaOn ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                      " ",
+                      "This site is protected by reCAPTCHA; the Google",
+                      " ",
+                      /* @__PURE__ */ jsx(
+                        "a",
+                        {
+                          href: "https://policies.google.com/privacy",
+                          target: "_blank",
+                          rel: "noopener noreferrer",
+                          className: "underline underline-offset-2 hover:text-foreground",
+                          children: "Privacy Policy"
+                        }
+                      ),
+                      " ",
+                      "and",
+                      " ",
+                      /* @__PURE__ */ jsx(
+                        "a",
+                        {
+                          href: "https://policies.google.com/terms",
+                          target: "_blank",
+                          rel: "noopener noreferrer",
+                          className: "underline underline-offset-2 hover:text-foreground",
+                          children: "Terms of Service"
+                        }
+                      ),
+                      " ",
+                      "apply."
+                    ] }) : null
+                  ]
+                }
+              )
             ]
           }
         ) })