@burdenoff/website-sdk 2026.828.5 → 2026.828.7

package/dist/index.js

@@ -5993,11 +5993,40 @@ function getRecognitionCtor() {
   const w = window;
   return w.SpeechRecognition ?? w.webkitSpeechRecognition ?? null;
 }
+var MIC_DENIED_MESSAGE = "Microphone access was blocked. Allow it in your browser's site settings to dictate.";
+async function ensureMicrophoneAccess() {
+  const media = typeof navigator === "undefined" ? void 0 : navigator.mediaDevices;
+  if (!media?.getUserMedia) return { ok: true, confirmed: false };
+  try {
+    const status = await navigator.permissions?.query({
+      name: "microphone"
+    });
+    if (status?.state === "granted") return { ok: true, confirmed: true };
+  } catch {
+  }
+  try {
+    const stream = await media.getUserMedia({ audio: true });
+    for (const track of stream.getTracks()) track.stop();
+    return { ok: true, confirmed: true };
+  } catch (error) {
+    const name = typeof error === "object" && error !== null && "name" in error ? String(error.name) : "";
+    if (name === "NotAllowedError" || name === "SecurityError") {
+      return { ok: false, message: MIC_DENIED_MESSAGE };
+    }
+    if (name === "NotFoundError" || name === "DevicesNotFoundError") {
+      return { ok: false, message: "No microphone was found." };
+    }
+    return {
+      ok: false,
+      message: "Dictation could not start. You can type instead."
+    };
+  }
+}
 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.";
+      return MIC_DENIED_MESSAGE;
     case "no-speech":
       return "I didn't catch anything \u2014 try again a little closer to the mic.";
     case "audio-capture":
@@ -6020,11 +6049,23 @@ function useSpeechInput({
   const [interim, setInterim] = React.useState("");
   const [error, setError] = React.useState(null);
   const recognitionRef = React.useRef(null);
+  const startTokenRef = React.useRef(0);
+  const micConfirmedRef = React.useRef(false);
+  const beginRecognitionRef = React.useRef(null);
+  const beginRecognition = React.useCallback(
+    (Ctor, token) => {
+      beginRecognitionRef.current?.(Ctor, token);
+    },
+    []
+  );
   const finalRef = React.useRef(onFinalTranscript);
   const errorRef = React.useRef(onError);
   finalRef.current = onFinalTranscript;
   errorRef.current = onError;
   const stop = React.useCallback(() => {
+    startTokenRef.current += 1;
+    setListening(false);
+    setInterim("");
     const recognition = recognitionRef.current;
     if (!recognition) return;
     try {
@@ -6038,48 +6079,70 @@ function useSpeechInput({
     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;
+    setError(null);
+    setListening(true);
+    startTokenRef.current += 1;
+    const token = startTokenRef.current;
+    void ensureMicrophoneAccess().then((access) => {
+      if (token !== startTokenRef.current) return;
+      micConfirmedRef.current = access.ok && access.confirmed;
+      if (!access.ok) {
+        setListening(false);
+        setError(access.message);
+        errorRef.current?.(access.message);
+        return;
       }
-      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);
+      beginRecognition(Ctor, token);
+    });
+  }, [beginRecognition, stop]);
+  const beginRecognitionImpl = React.useCallback(
+    (Ctor, token) => {
+      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 = () => {
+        if (token !== startTokenRef.current) return;
+        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 = micConfirmedRef.current && (event.error === "not-allowed" || event.error === "service-not-allowed") ? "Dictation isn't available in this browser. You can type instead." : 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);
       }
-    };
-    recognition.onend = () => {
-      setListening(false);
-      setInterim("");
-    };
-    recognitionRef.current = recognition;
-    try {
-      recognition.start();
-    } catch {
-      setListening(false);
-    }
-  }, [lang, stop]);
+    },
+    [lang]
+  );
+  beginRecognitionRef.current = beginRecognitionImpl;
   const toggle = React.useCallback(() => {
     if (listening) stop();
     else start();
@@ -6195,10 +6258,33 @@ function initialOf(value, fallback) {
   const source = (value || fallback).trim();
   return source ? source.slice(0, 1).toUpperCase() : "?";
 }
+function logoUrlOf(url) {
+  try {
+    const { origin, protocol } = new URL(url);
+    if (protocol !== "https:" && protocol !== "http:") return null;
+    return `${origin}/favicon.svg`;
+  } catch {
+    return null;
+  }
+}
 function ReferenceCard({ reference }) {
   const [imageFailed, setImageFailed] = React.useState(false);
+  const [logoFailed, setLogoFailed] = React.useState(false);
   const host = hostnameOf(reference.url);
+  const logoUrl = logoUrlOf(reference.url);
   const showImage = Boolean(reference.imageUrl) && !imageFailed;
+  const showLogo = Boolean(logoUrl) && !logoFailed;
+  const letterPlate = /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-full w-full items-center justify-center bg-gradient-to-br from-primary/25 via-primary/5 to-secondary", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-semibold text-primary/70 sm:text-2xl", children: initialOf(reference.product, reference.title || host) }) });
+  const logoImg = showLogo ? /* @__PURE__ */ jsxRuntime.jsx(
+    "img",
+    {
+      src: logoUrl ?? "",
+      alt: "",
+      loading: "lazy",
+      onError: () => setLogoFailed(true),
+      className: "h-full w-full object-contain p-1.5 sm:p-0"
+    }
+  ) : letterPlate;
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "a",
     {
@@ -6206,9 +6292,10 @@ function ReferenceCard({ reference }) {
       href: reference.url,
       target: "_blank",
       rel: "noopener noreferrer",
-      className: "group flex flex-col overflow-hidden rounded-xl border border-border bg-card transition-colors hover:border-primary/40 hover:bg-accent/40 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
+      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__ */ jsxRuntime.jsx("div", { className: "relative aspect-[16/9] w-full overflow-hidden bg-muted", children: showImage ? /* @__PURE__ */ jsxRuntime.jsx(
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative h-11 w-11 shrink-0 overflow-hidden rounded-lg bg-muted sm:hidden", children: logoImg }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative hidden aspect-[16/9] w-full overflow-hidden bg-muted sm:block", children: showImage ? /* @__PURE__ */ jsxRuntime.jsx(
           "img",
           {
             src: reference.imageUrl ?? "",
@@ -6217,17 +6304,22 @@ function ReferenceCard({ reference }) {
             onError: () => setImageFailed(true),
             className: "h-full w-full object-cover transition-transform duration-300 group-hover:scale-105"
           }
-        ) : (
-          /* Graceful fallback: a token-derived gradient plate, so a missing or
-             broken preview still reads as a deliberate card, not a hole. */
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-full w-full items-center justify-center bg-gradient-to-br from-primary/25 via-primary/5 to-secondary", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-2xl font-semibold text-primary/70", children: initialOf(reference.product, reference.title || host) }) })
-        ) }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-1 flex-col gap-1.5 p-3", children: [
+        ) : showLogo ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-full w-full items-center justify-center bg-gradient-to-br from-primary/15 via-transparent to-secondary/60 p-6", children: /* @__PURE__ */ jsxRuntime.jsx(
+          "img",
+          {
+            src: logoUrl ?? "",
+            alt: "",
+            loading: "lazy",
+            onError: () => setLogoFailed(true),
+            className: "max-h-full max-w-full object-contain"
+          }
+        ) }) : letterPlate }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-0.5 sm:gap-1.5 sm:p-3", children: [
           /* @__PURE__ */ jsxRuntime.jsx("p", { className: "line-clamp-2 text-sm font-semibold leading-snug text-card-foreground", children: reference.title || host || reference.url }),
-          reference.description ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "line-clamp-2 text-xs leading-relaxed text-muted-foreground", children: reference.description }) : null,
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-auto flex items-center gap-2 pt-2", children: [
-            reference.product ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "rounded-full bg-secondary px-2 py-0.5 text-xs font-medium text-secondary-foreground", children: reference.product }) : null,
-            /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "ml-auto inline-flex min-w-0 items-center gap-1 text-xs text-muted-foreground", children: [
+          reference.description ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "line-clamp-2 text-xs leading-relaxed text-muted-foreground max-sm:hidden", children: reference.description }) : null,
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 sm:mt-auto sm:pt-2", children: [
+            reference.product ? /* @__PURE__ */ jsxRuntime.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,
+            /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "inline-flex min-w-0 items-center gap-1 text-xs text-muted-foreground sm:ml-auto", children: [
               /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ExternalLink, { className: "h-3 w-3 shrink-0" }),
               /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: host })
             ] })
@@ -6313,7 +6405,8 @@ function UserBubble({ message }) {
 function AssistantBubble({
   message,
   activity,
-  onNavigate
+  onNavigate,
+  anchorRef
 }) {
   const streaming = message.status === "PENDING" || message.status === "RUNNING";
   const body = message.content || message.partialContent || "";
@@ -6321,9 +6414,10 @@ function AssistantBubble({
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
+      ref: anchorRef,
       "data-boff-explore": "assistant",
       "data-status": message.status,
-      className: "flex gap-3",
+      className: "flex scroll-mt-4 gap-3",
       children: [
         /* @__PURE__ */ jsxRuntime.jsx(
           "span",
@@ -6552,6 +6646,8 @@ function ExplorePage({
   });
   speechStopRef.current = speech.stop;
   const scrollRef = React.useRef(null);
+  const latestAssistantRef = React.useRef(null);
+  const alignedForRef = React.useRef(null);
   const stickToBottomRef = React.useRef(true);
   const composingRef = React.useRef(false);
   const busy = phase === "sending" || phase === "streaming";
@@ -6577,12 +6673,32 @@ function ExplorePage({
     if (!el) return;
     stickToBottomRef.current = el.scrollHeight - el.scrollTop - el.clientHeight < 80;
   }, []);
+  const latestAssistantId = React.useMemo(() => {
+    for (let i = messages.length - 1; i >= 0; i -= 1) {
+      const message = messages[i];
+      if (message && message.role === "ASSISTANT") return message.id;
+    }
+    return null;
+  }, [messages]);
+  React.useEffect(() => {
+    const el = scrollRef.current;
+    const anchor = latestAssistantRef.current;
+    if (!el || !anchor || !latestAssistantId) return;
+    if (alignedForRef.current === latestAssistantId) return;
+    if (!stickToBottomRef.current) return;
+    if (anchor.offsetHeight === 0) return;
+    alignedForRef.current = latestAssistantId;
+    const delta = anchor.getBoundingClientRect().top - el.getBoundingClientRect().top;
+    el.scrollTop = Math.max(0, el.scrollTop + delta - 12);
+  }, [latestAssistantId, messages]);
   React.useEffect(() => {
     if (!stickToBottomRef.current) return;
+    if (latestAssistantId && alignedForRef.current === latestAssistantId)
+      return;
     const el = scrollRef.current;
     if (!el) return;
     el.scrollTop = el.scrollHeight;
-  }, [messages, activity]);
+  }, [activity, latestAssistantId, messages]);
   const submitDraft = React.useCallback(() => {
     const text = draft.trim();
     if (!text || overLimit || busy || !canSend) return;
@@ -6782,7 +6898,8 @@ function ExplorePage({
                 {
                   message,
                   activity,
-                  onNavigate
+                  onNavigate,
+                  anchorRef: message.id === latestAssistantId ? latestAssistantRef : void 0
                 },
                 message.id
               )