blume 2.0.3 → 2.1.1

package/src/components/islands/assistant.tsx

@@ -4,10 +4,14 @@ import { useEffect, useRef, useState } from "react";
 import type { FormEvent, KeyboardEvent as ReactKeyboardEvent } from "react";
 import { createPortal } from "react-dom";
 
+import type { CaptchaSettings } from "../../captcha/schema.ts";
 import type { UIStrings } from "../../core/i18n-ui.ts";
 import { copyText } from "../copy-feedback.ts";
 import { joinBase, mountBase } from "./base-path.ts";
+import { splitCode, withCode } from "./code-question.ts";
+import type { CodeAttachment } from "./code-question.ts";
 import { useAssistant } from "./hooks.ts";
+import { supportHref } from "./support-link.ts";
 
 /** A resolved empty-state prompt; `icon` is ready-to-inline SVG (or null). */
 interface Suggestion {
@@ -25,6 +29,8 @@ interface AssistantIcons {
   clear: string;
   close: string;
   copy: string;
+  /** The attached code chip's dismiss glyph. */
+  remove?: string;
 }
 
 // Empty bodies so the island still renders (iconless) if instantiated without
@@ -45,11 +51,18 @@ const DEFAULT_ASK: UIStrings["assistant"] = {
   copy: "Copy conversation",
   empty: "Ask a question about the docs.",
   error: "Sorry, something went wrong.",
+  explainCode: "Explain this code.",
   label: "Ask a question",
+  open: "Open assistant",
   placeholder: "Ask a question…",
+  rateLimited: "You've asked a lot of questions. Try again in a few minutes.",
+  removeCode: "Remove code",
   send: "Send",
+  support: "Contact support",
+  supportSubject: "Question from the docs",
   tip: "Tip: You can open and close chat with",
   title: "Assistant",
+  verifyFailed: "We couldn't check that you're human. Try again.",
   you: "You",
 };
 
@@ -140,22 +153,54 @@ const ICON_BUTTON_CLASS =
 const ANSWER_CLASS =
   "prose prose-sm max-w-none text-foreground [&_a]:inline-flex [&_a]:items-center [&_a]:gap-1 [&_a]:rounded-full [&_a]:bg-muted [&_a]:px-2 [&_a]:py-1 [&_a]:align-middle [&_a]:font-medium [&_a]:text-[0.7rem] [&_a]:leading-none [&_a]:text-muted-foreground! [&_a]:no-underline! [&_a:hover]:text-foreground!";
 
+/** A reader's message bubble. */
+const USER_MESSAGE_CLASS =
+  "rounded-blume bg-muted text-foreground max-w-[85%] self-end px-3 py-2 text-sm whitespace-pre-wrap";
+
+/** What `blume:open-assistant` may carry. */
+interface OpenAssistantDetail {
+  code?: CodeAttachment;
+  query?: string;
+}
+
+/** A reader's message, with any code they asked about shown as a block. */
+const UserMessage = ({ content }: { content: string }) => {
+  const { code, text } = splitCode(content);
+  if (!code) {
+    return <div className={USER_MESSAGE_CLASS}>{text}</div>;
+  }
+  return (
+    <div className={USER_MESSAGE_CLASS}>
+      {text}
+      <pre className="bg-background mt-2 max-h-40 overflow-auto rounded-md p-2 font-mono text-xs whitespace-pre">
+        {code.source}
+      </pre>
+    </div>
+  );
+};
+
 const Assistant = ({
+  captcha,
   endpoint = DEFAULT_ASK_ENDPOINT,
   icons = EMPTY_ICONS,
   strings,
   suggestions = EMPTY_SUGGESTIONS,
+  support,
 }: {
+  captcha?: CaptchaSettings;
   endpoint?: string;
   icons?: AssistantIcons;
   strings?: UIStrings["assistant"];
   suggestions?: Suggestion[];
+  support?: string;
 }) => {
   // Merge per key (not `strings ?? …`) so a dictionary from a stale snapshot
   // that predates newer keys still resolves every label to its English default.
   const t = { ...DEFAULT_ASK, ...strings };
   const [open, setOpen] = useState(false);
   const [input, setInput] = useState("");
+  // A code block the reader is asking about, sent with the next question.
+  const [code, setCode] = useState<CodeAttachment | null>(null);
   // The streaming client — request shaping, optimistic assistant bubble,
   // stale-stream/abort guards, error-body handling — is the public useAssistant
   // hook, so the built-in panel and custom UIs share one implementation.
@@ -164,7 +209,14 @@ const Assistant = ({
     loading: busy,
     messages,
     reset,
-  } = useAssistant({ endpoint, errorMessage: t.error });
+    thread,
+  } = useAssistant({
+    captcha,
+    endpoint,
+    errorMessage: t.error,
+    rateLimitMessage: t.rateLimited,
+    verifyMessage: t.verifyFailed,
+  });
   const inputRef = useRef<HTMLTextAreaElement>(null);
   const scrollRef = useRef<HTMLDivElement>(null);
   const triggerRef = useRef<HTMLButtonElement>(null);
@@ -193,14 +245,18 @@ const Assistant = ({
     return () => document.removeEventListener("astro:after-swap", onSwap);
   }, []);
 
-  // The search modal forwards its query so "Assistant: <query>" carries straight in.
+  // The search modal forwards its query so "Assistant: <query>" carries
+  // straight in, and a code block's Ask button attaches its code.
   useEffect(() => {
     const handler = (event: Event) => {
       // SAFETY: `blume:open-assistant` is only ever dispatched as a CustomEvent
-      // whose optional detail carries the search query.
-      const query = (event as CustomEvent<{ query?: string }>).detail?.query;
-      if (query) {
-        setInput(query);
+      // whose optional detail carries the search query or a code block.
+      const { detail } = event as CustomEvent<OpenAssistantDetail | null>;
+      if (detail?.query) {
+        setInput(detail.query);
+      }
+      if (detail?.code) {
+        setCode(detail.code);
       }
       setOpen(true);
     };
@@ -366,12 +422,14 @@ const Assistant = ({
   }, [messages, portalTarget]);
 
   const runQuestion = (raw: string) => {
-    const question = raw.trim();
+    // A question about attached code may leave the words to us.
+    const question = raw.trim() || (code ? t.explainCode : "");
     if (!question || busy) {
       return;
     }
-    void ask(question);
+    void ask(code ? withCode(question, code) : question);
     setInput("");
+    setCode(null);
   };
 
   const clearConversation = () => {
@@ -464,13 +522,11 @@ const Assistant = ({
                 last entry while streaming, or clears wholesale on reset. */}
             {messages.map((message, index) =>
               message.role === "user" ? (
-                <div
-                  className="rounded-blume bg-muted text-foreground max-w-[85%] self-end px-3 py-2 text-sm whitespace-pre-wrap"
+                <UserMessage
+                  content={message.content}
                   // oxlint-disable-next-line react/no-array-index-key -- append-only list, see above
                   key={index}
-                >
-                  {message.content}
-                </div>
+                />
               ) : (
                 // oxlint-disable-next-line react/no-array-index-key -- append-only list, see above
                 <div className={ANSWER_CLASS} key={index}>
@@ -491,6 +547,23 @@ const Assistant = ({
                 </div>
               )
             )}
+            {support && !busy && (
+              <a
+                className="text-muted-foreground hover:text-foreground self-start text-xs underline underline-offset-2 transition-colors"
+                href={supportHref(support, {
+                  ai: t.ai,
+                  messages,
+                  subject: t.supportSubject,
+                  thread,
+                  you: t.you,
+                })}
+                {...(support.startsWith("mailto:") || support.startsWith("/")
+                  ? {}
+                  : { rel: "noopener noreferrer", target: "_blank" })}
+              >
+                {t.support}
+              </a>
+            )}
           </div>
         ) : (
           <div className="mt-auto flex flex-col gap-0.5 p-4">
@@ -531,6 +604,21 @@ const Assistant = ({
         className="border-border relative shrink-0 border-t"
         onSubmit={onSubmit}
       >
+        {code && (
+          <div className="flex items-center gap-1.5 px-4 pt-3">
+            <span className="rounded-blume bg-muted text-muted-foreground max-w-full truncate px-2 py-1 font-mono text-xs">
+              {code.title || code.language || t.explainCode}
+            </span>
+            <button
+              aria-label={t.removeCode}
+              className={ICON_BUTTON_CLASS}
+              onClick={() => setCode(null)}
+              type="button"
+            >
+              <Glyph path={icons.remove ?? ""} size={14} />
+            </button>
+          </div>
+        )}
         <textarea
           aria-label={t.label}
           className="text-foreground placeholder:text-muted-foreground max-h-48 min-h-[5rem] w-full resize-none bg-transparent px-4 py-3.5 pe-14 text-sm outline-none pointer-coarse:text-base"
@@ -544,7 +632,7 @@ const Assistant = ({
         <button
           aria-label={t.send}
           className="rounded-blume bg-foreground text-background absolute end-3 bottom-3 inline-flex h-8 w-8 cursor-pointer items-center justify-center transition-opacity disabled:cursor-not-allowed disabled:opacity-40"
-          disabled={busy || input.trim().length === 0}
+          disabled={busy || (input.trim().length === 0 && !code)}
           type="submit"
         >
           <Glyph path={icons.arrowUp} />
@@ -559,6 +647,8 @@ const Assistant = ({
         aria-expanded={open}
         aria-label={t.title}
         className={TRIGGER_CLASS}
+        // Named by the header's tooltip, like the buttons beside it.
+        data-blume-tooltip={t.open}
         onClick={() => setOpen((value) => !value)}
         ref={triggerRef}
         type="button"

package/src/components/islands/code-question.ts

@@ -0,0 +1,62 @@
+/**
+ * Questions about a code block. A code block's Ask button opens the assistant
+ * with the block attached (`blume:open-assistant` with `detail.code`); the
+ * question goes out with the code folded in as a fenced block after the
+ * reader's words, which is how the model sees it, and the conversation shows
+ * the two apart again.
+ */
+
+/** A code block the reader asked about. */
+export interface CodeAttachment {
+  /** The fence language (`ts`), or empty when the block has none. */
+  language: string;
+  source: string;
+  /** The block's title (`server.ts`), when it has one. */
+  title?: string;
+}
+
+/** The most code one question carries, well inside the route's budget. */
+export const MAX_ATTACHED_CODE = 6000;
+
+/** A user message, split into the reader's words and any attached code. */
+export interface SplitQuestion {
+  code?: { language: string; source: string };
+  text: string;
+}
+
+/** A fence longer than any backtick run in the code, so the code can't close it. */
+const fenceFor = (source: string): string => {
+  const longest = Math.max(
+    2,
+    ...[...source.matchAll(/`+/gu)].map(([run]) => run.length)
+  );
+  return "`".repeat(longest + 1);
+};
+
+/** The question as sent: the reader's words, then the code as a fenced block. */
+export const withCode = (question: string, code: CodeAttachment): string => {
+  const source =
+    code.source.length > MAX_ATTACHED_CODE
+      ? `${code.source.slice(0, MAX_ATTACHED_CODE)}\n…`
+      : code.source.replace(/\n+$/u, "");
+  const fence = fenceFor(source);
+  return `${question}\n\n${fence}${code.language}\n${source}\n${fence}`;
+};
+
+const TRAILING_FENCE =
+  /\n\n(?<fence>`{3,})(?<language>[^\n`]*)\n(?<source>[\s\S]*)\n\k<fence>$/u;
+
+/** A user message split back into the words and the attached code. */
+export const splitCode = (content: string): SplitQuestion => {
+  const match = TRAILING_FENCE.exec(content);
+  if (!match?.groups) {
+    return { text: content };
+  }
+  return {
+    code: {
+      language: match.groups.language ?? "",
+      source: match.groups.source ?? "",
+    },
+    text: content.slice(0, match.index),
+  };
+};

package/src/components/islands/hooks.ts

@@ -1,9 +1,16 @@
 import { useCallback, useEffect, useRef, useState } from "react";
 
+import {
+  ASK_MAX_MESSAGES,
+  ASK_MAX_MESSAGES_CHARS,
+} from "../../ai/ask-limits.ts";
+import { captchaToken } from "../../captcha/client.ts";
+import type { CaptchaSettings } from "../../captcha/schema.ts";
 import type { BlumeClientData } from "../../core/data.ts";
 import { track } from "../layout/analytics-client.ts";
 import type { SearchFn, SearchResult } from "../layout/search/types.ts";
 import { joinBase, stripBase } from "./base-path.ts";
+import { newThreadId } from "./support-link.ts";
 
 /**
  * React hooks for Blume islands.
@@ -159,11 +166,22 @@ export interface UseAssistant {
   loading: boolean;
   messages: AskMessage[];
   reset: () => void;
+  /**
+   * The conversation's id, new after every `reset()`. The `ask` analytics
+   * events carry it as `thread`, and the support link passes it along.
+   */
+  thread: string;
 }
 
 const DEFAULT_ASK_ENDPOINT = joinBase(import.meta.env.BASE_URL, "api/ask");
 
 export interface UseAssistantOptions {
+  /**
+   * The site's bot check (`ai.assistant.captcha`), as `useBlume().config
+   * .assistant.captcha` holds it: each question gets a fresh token, sent as
+   * `captcha` in the request body.
+   */
+  captcha?: CaptchaSettings | null;
   /** Existing assistant endpoint; defaults to Blume's generated `/api/ask`. */
   endpoint?: string;
   /**
@@ -172,11 +190,38 @@ export interface UseAssistantOptions {
    * dictionary string.
    */
   errorMessage?: string;
+  /**
+   * Shown as the assistant's answer when the route's rate limit turns the
+   * question away (`429`). Defaults to an English notice; the built-in
+   * island passes its localized dictionary string.
+   */
+  rateLimitMessage?: string;
+  /**
+   * Shown as the assistant's answer when the bot check fails, in the browser
+   * or at the route (`403`). Defaults to an English notice; the built-in
+   * island passes its localized dictionary string.
+   */
+  verifyMessage?: string;
 }
 
 /** Shown as the assistant's answer when the request fails or throws. */
 const ASK_ERROR = "Something went wrong answering that. Please try again.";
 
+/** Shown as the assistant's answer when the rate limit turns a question away. */
+const ASK_RATE_LIMITED =
+  "You've asked a lot of questions. Try again in a few minutes.";
+
+/** Shown as the assistant's answer when the bot check fails. */
+const ASK_VERIFY_FAILED = "We couldn't check that you're human. Try again.";
+
+/** What the assistant sends the route. */
+interface AskPayload {
+  /** The bot check's token, when the site has one. */
+  captcha?: string;
+  messages: AskMessage[];
+  page: { path: string };
+}
+
 /** How the assistant's generated route opens its missing-credential notice. */
 const NOT_CONFIGURED = /^The assistant is not configured/u;
 
@@ -199,10 +244,52 @@ const unavailableNotice = async (
   return NOT_CONFIGURED.test(text) && text.length <= 200 ? text : null;
 };
 
+/** The notices the route's refusals map to. */
+interface RefusalNotices {
+  rateLimitMessage: string;
+  verifyMessage: string;
+}
+
+/**
+ * The reader-facing notice for the route turning a question away: the rate
+ * limit (`429`) or the bot check (`403`), or `null` for any other status.
+ */
+const refusalNotice = (
+  status: number,
+  notices: RefusalNotices
+): string | null => {
+  if (status === 429) {
+    return notices.rateLimitMessage;
+  }
+  return status === 403 ? notices.verifyMessage : null;
+};
+
 /** The current route with the deployment base stripped, for page grounding. */
 const currentPath = (): string =>
   stripBase(import.meta.env.BASE_URL, window.location.pathname);
 
+/**
+ * The conversation as the route is sent it: all of it while it fits the
+ * route's limits (`ai/ask-limits.ts`), else the latest turns that do, the
+ * oldest dropped first, so a long chat keeps working instead of answering
+ * `400`. The kept turns open with a question, not an answer cut from its
+ * own, and the question being asked always goes, even alone over the limit.
+ */
+const withinAskLimits = (history: AskMessage[]): AskMessage[] => {
+  const last = history.length - 1;
+  let start = Math.max(0, history.length - ASK_MAX_MESSAGES);
+  while (
+    start < last &&
+    JSON.stringify(history.slice(start)).length > ASK_MAX_MESSAGES_CHARS
+  ) {
+    start += 1;
+  }
+  while (start < last && history[start]?.role !== "user") {
+    start += 1;
+  }
+  return history.slice(start);
+};
+
 /**
  * Stream answers from the assistant endpoint. Mirrors the built-in assistant island so
  * a custom chat UI shares the same grounded, page-aware backend.
@@ -212,8 +299,12 @@ export const useAssistant = (
 ): UseAssistant => {
   const endpoint = options.endpoint ?? DEFAULT_ASK_ENDPOINT;
   const errorMessage = options.errorMessage ?? ASK_ERROR;
+  const rateLimitMessage = options.rateLimitMessage ?? ASK_RATE_LIMITED;
+  const verifyMessage = options.verifyMessage ?? ASK_VERIFY_FAILED;
+  const { captcha } = options;
   const [messages, setMessages] = useState<AskMessage[]>([]);
   const [loading, setLoading] = useState(false);
+  const [thread, setThread] = useState(newThreadId);
   // The stream writes into the conversation via state updates, so `reset()`
   // mid-answer must revoke the in-flight request's right to write — otherwise
   // its next chunk re-appends the assistant bubble onto the emptied list, and
@@ -255,7 +346,7 @@ export const useAssistant = (
       ) =>
         track(
           event,
-          { ...props, path: pathname, questionChars: trimmed.length },
+          { ...props, path: pathname, questionChars: trimmed.length, thread },
           { question: trimmed }
         );
       report("ask", {});
@@ -280,12 +371,32 @@ export const useAssistant = (
       const assistant: AskMessage = { content: "", role: "assistant" };
       setMessages([...history, assistant]);
       setLoading(true);
+      // Answer with a notice instead: an error, or the route turning the
+      // question away. Silent once a reset has revoked the question.
+      const fail = (notice: string) => {
+        if (live()) {
+          outcome("ask_error", { status });
+          assistant.content = notice;
+          setMessages([...history, { ...assistant }]);
+        }
+      };
       try {
+        // A fresh bot-check token per question, when the site has a check;
+        // `null` when the check didn't pass in the browser.
+        const token = captcha
+          ? await captchaToken(captcha).catch(() => null)
+          : undefined;
+        if (token === null) {
+          fail(verifyMessage);
+          return;
+        }
+        const payload: AskPayload = {
+          captcha: token,
+          messages: withinAskLimits(history),
+          page: { path },
+        };
         const response = await fetch(endpoint, {
-          body: JSON.stringify({
-            messages: history,
-            page: { path },
-          }),
+          body: JSON.stringify(payload),
           headers: { "content-type": "application/json" },
           method: "POST",
           signal: controller.signal,
@@ -294,12 +405,12 @@ export const useAssistant = (
         if (!response.ok) {
           // An error body (JSON, HTML error page) must not stream in as the
           // assistant's answer — only the route's own not-configured notice.
-          const notice = await unavailableNotice(response).catch(() => null);
-          if (live()) {
-            outcome("ask_error", { status });
-            assistant.content = notice ?? errorMessage;
-            setMessages([...history, { ...assistant }]);
-          }
+          const notice =
+            refusalNotice(status, {
+              rateLimitMessage,
+              verifyMessage,
+            }) ?? (await unavailableNotice(response).catch(() => null));
+          fail(notice ?? errorMessage);
           return;
         }
         const reader = response.body?.getReader();
@@ -332,20 +443,14 @@ export const useAssistant = (
           if (assistant.content) {
             outcome("ask_answer", { chars: assistant.content.length });
           } else {
-            outcome("ask_error", { status });
-            assistant.content = errorMessage;
-            setMessages([...history, { ...assistant }]);
+            fail(errorMessage);
           }
         }
       } catch {
         // A thrown fetch (offline, DNS failure, CORS) must not strand the
         // pre-appended empty assistant message as a stuck placeholder. A
         // reset's abort lands here too — the guard keeps it silent.
-        if (live()) {
-          outcome("ask_error", { status });
-          assistant.content = errorMessage;
-          setMessages([...history, { ...assistant }]);
-        }
+        fail(errorMessage);
         // oxlint-disable-next-line react/todo -- React Compiler cannot lower try/finally; the hook stays manually memoized above
       } finally {
         if (live()) {
@@ -353,7 +458,16 @@ export const useAssistant = (
         }
       }
     },
-    [endpoint, errorMessage, loading, messages]
+    [
+      captcha,
+      endpoint,
+      errorMessage,
+      loading,
+      messages,
+      rateLimitMessage,
+      thread,
+      verifyMessage,
+    ]
   );
 
   // Retained for the compiler-off opt-out path (`react: { compiler: false }`):
@@ -364,9 +478,10 @@ export const useAssistant = (
     abortRef.current?.abort();
     abortRef.current = null;
     setMessages([]);
+    setThread(newThreadId());
     // The in-flight `ask`'s finally is now stale and won't clear this.
     setLoading(false);
   }, []);
 
-  return { ask, loading, messages, reset };
+  return { ask, loading, messages, reset, thread };
 };

package/src/components/islands/support-link.ts

@@ -0,0 +1,68 @@
+/**
+ * The assistant's handoff to your support channel (`ai.assistant.support`).
+ * A `mailto:` link starts an email with the conversation as its body, so the
+ * reader doesn't have to repeat themselves; any other link gets the
+ * conversation's `thread` id in its query, the same id the assistant's
+ * analytics events carry, so a support team can find the conversation.
+ */
+
+/** One turn of the conversation. */
+export interface SupportMessage {
+  content: string;
+  role: "assistant" | "user";
+}
+
+/** What the link is built from. */
+export interface SupportContext {
+  /** The label the transcript gives the assistant's turns. */
+  ai: string;
+  messages: readonly SupportMessage[];
+  /** The email's subject. */
+  subject: string;
+  thread: string;
+  /** The label the transcript gives the reader's turns. */
+  you: string;
+}
+
+/**
+ * How much conversation an email carries: mail clients cut long `mailto:`
+ * links, so a long conversation is trimmed from the start, keeping the
+ * latest turns.
+ */
+export const MAX_TRANSCRIPT_CHARS = 1500;
+
+const transcriptOf = (context: SupportContext): string => {
+  const full = context.messages
+    .map(
+      (message) =>
+        `${message.role === "user" ? context.you : context.ai}: ${message.content}`
+    )
+    .join("\n\n");
+  return full.length > MAX_TRANSCRIPT_CHARS
+    ? `…${full.slice(-MAX_TRANSCRIPT_CHARS)}`
+    : full;
+};
+
+/** The support link for this conversation. */
+export const supportHref = (
+  support: string,
+  context: SupportContext
+): string => {
+  if (support.startsWith("mailto:")) {
+    // `mailto:` wants %20, not the `+` URLSearchParams writes for a space.
+    const body = `${transcriptOf(context)}\n\n(${context.thread})`;
+    const separator = support.includes("?") ? "&" : "?";
+    return `${support}${separator}subject=${encodeURIComponent(context.subject)}&body=${encodeURIComponent(body)}`;
+  }
+  const url = new URL(support, "https://blume.invalid");
+  url.searchParams.set("thread", context.thread);
+  return url.origin === "https://blume.invalid"
+    ? `${url.pathname}${url.search}${url.hash}`
+    : url.href;
+};
+
+/** A fresh conversation id: 16 hex characters. */
+export const newThreadId = (): string =>
+  Array.from(crypto.getRandomValues(new Uint8Array(8)), (byte) =>
+    byte.toString(16).padStart(2, "0")
+  ).join("");

package/src/components/layout/Analytics.astro

@@ -1,5 +1,6 @@
 ---
 import VercelAnalytics from "@vercel/analytics/astro";
+import data from "blume:data";
 
 import { analyticsHead } from "../../analytics/head.ts";
 import type { BlumeDataConfig } from "../../core/data.ts";
@@ -10,12 +11,20 @@ import type { BlumeDataConfig } from "../../core/data.ts";
 // component for `vercel()`, one <script> for every other adapter. Loads ONLY
 // in production builds so `blume dev` stays clean and local traffic never
 // reaches your analytics.
+//
+// With `consent` configured, every tag is held as inert `text/plain` until
+// the reader allows analytics, when the consent runtime runs it
+// (`consent/client.ts`); Vercel's component sends nothing until then instead
+// (`consent/init.ts`).
 interface Props {
   analytics?: BlumeDataConfig["analytics"] | null;
 }
 
 const { analytics } = Astro.props;
 const nodes = analyticsHead(import.meta.env.PROD ? (analytics ?? []) : []);
+const held = data.config.consent
+  ? { "data-blume-consent": "analytics", type: "text/plain" }
+  : {};
 ---
 
 {
@@ -24,9 +33,9 @@ const nodes = analyticsHead(import.meta.env.PROD ? (analytics ?? []) : []);
       return <VercelAnalytics {...node.props} />;
     }
     return node.content === null ? (
-      <script is:inline {...node.attributes} />
+      <script is:inline {...node.attributes} {...held} />
     ) : (
-      <script is:inline set:html={node.content} {...node.attributes} />
+      <script is:inline set:html={node.content} {...node.attributes} {...held} />
     );
   })
 }