blume 2.0.3 → 2.1.0

package/src/components/content/view-switcher.ts

@@ -0,0 +1,71 @@
+/**
+ * The page view picker's logic (see `ViewSwitcher.astro`). A page written in
+ * `<View title>` blocks shows one view at a time. The choice sits on
+ * `<body data-blume-view>`, which each page brings fresh, and a per-page style
+ * hides everything tagged with another view: the `<View>` blocks, the
+ * picker's icons, and the table of contents entries for their headings.
+ */
+
+/**
+ * Where a reader's last-picked view is remembered, across pages. The init
+ * script below spells it out, as it does {@link VIEW_PARAM}.
+ */
+export const VIEW_STORAGE_KEY = "blume-view";
+
+/** The query parameter a shared link picks a view with (`?view=Python`). */
+export const VIEW_PARAM = "view";
+
+/**
+ * The view to show: the first of the candidates the page has, most specific
+ * first (a linked heading's view, the link's `?view=`, the reader's last
+ * pick), else the page's first view.
+ */
+export const chooseView = (
+  titles: readonly string[],
+  candidates: readonly (string | null | undefined)[]
+): string | undefined =>
+  candidates.find(
+    (candidate): candidate is string =>
+      candidate !== null &&
+      candidate !== undefined &&
+      titles.includes(candidate)
+  ) ?? titles[0];
+
+/**
+ * A CSS string for `value`, safe inside a `<style>` element: quotes and
+ * backslashes escaped, `<` as a hex escape so the text can't close the
+ * element, and line breaks (which a CSS string can't hold) as spaces.
+ */
+const cssString = (value: string): string =>
+  `"${value
+    .replaceAll(/["\\]/gu, String.raw`\$&`)
+    .replaceAll("<", String.raw`\3c `)
+    .replaceAll(/[\n\r\f]/gu, " ")}"`;
+
+/**
+ * The page's view CSS: with a view chosen on `<body>`, everything tagged with
+ * another is hidden; before a choice, everything but the first view is.
+ */
+export const viewStyle = (titles: readonly string[]): string => {
+  const [first] = titles;
+  if (first === undefined) {
+    return "";
+  }
+  const other = (title: string): string =>
+    `[data-blume-view]:not([data-blume-view=${cssString(title)}])`;
+  const selectors = [
+    `body:not([data-blume-view]) ${other(first)}`,
+    ...titles.map(
+      (title) => `body[data-blume-view=${cssString(title)}] ${other(title)}`
+    ),
+  ];
+  return `${selectors.join(",")}{display:none!important}`;
+};
+
+/**
+ * Runs inline as the picker is parsed, ahead of the views it controls, so a
+ * link's `?view=` or the reader's last pick applies before anything paints.
+ * Inline scripts run once per session under the client router; after that
+ * the picker element applies the choice as each page swaps in.
+ */
+export const VIEW_INIT_SCRIPT = `(()=>{const s=document.currentScript;const p=s&&s.closest("blume-view-switcher");if(!p)return;let t=[];try{t=JSON.parse(p.getAttribute("data-views")||"[]")}catch{}let r=null;try{r=localStorage.getItem("blume-view")}catch{}const l=new URLSearchParams(location.search).get("view");const v=[l,r].find((c)=>c&&t.includes(c))||t[0];if(!v)return;document.body.setAttribute("data-blume-view",v);const e=p.querySelector("select");if(e)e.value=v;})();`;

package/src/components/index.ts

@@ -25,7 +25,9 @@ export type {
   FrameProps,
   IconProps,
   PanelProps,
+  ParamFieldProps,
   PromptProps,
+  ResponseFieldProps,
   StepProps,
   StepsProps,
   TabProps,

package/src/components/islands/Assistant.astro

@@ -1,4 +1,5 @@
 ---
+import type { CaptchaSettings } from "../../captcha/schema.ts";
 import type { UIStrings } from "../../core/i18n-ui.ts";
 import { resolveIcon } from "../../theme/icons.ts";
 import Assistant from "./assistant.tsx";
@@ -9,12 +10,17 @@ interface Suggestion {
 }
 
 interface Props {
+  /** The bot check's public settings (`ai.assistant.captcha`). */
+  captcha?: CaptchaSettings;
   endpoint?: string;
   strings?: UIStrings["assistant"];
   suggestions?: Suggestion[];
+  /** The Contact support link (`ai.assistant.support`). */
+  support?: string;
 }
 
-const { endpoint, strings, suggestions = [] } = Astro.props;
+const { captcha, endpoint, strings, suggestions = [], support } =
+  Astro.props;
 
 // Icons resolve to inline SVG here (server-only module), so the client island
 // gets ready-to-render markup rather than a name it can't resolve. Bare Lucide
@@ -41,6 +47,7 @@ const icons = {
   clear: bodyFor("trash-2"),
   close: bodyFor("chevrons-right"),
   copy: bodyFor("copy"),
+  remove: bodyFor("x"),
 };
 ---
 
@@ -50,11 +57,13 @@ const icons = {
     panel and re-stamps the body push attribute itself on astro:after-swap
     (see assistant.tsx), since the swap replaces <body> wholesale. */}
 <Assistant
+  captcha={captcha}
   client:load
   endpoint={endpoint}
   icons={icons}
   strings={strings}
   suggestions={items}
+  support={support}
   transition:persist="blume-assistant"
 />
 

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,12 @@
 import { useCallback, useEffect, useRef, useState } from "react";
 
+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 +162,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 +186,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,6 +240,26 @@ 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);
@@ -212,8 +273,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 +320,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 +345,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: 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 +379,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 +417,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 +432,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 +452,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 };
 };