@assistant-ui/react 0.15.22 → 0.15.23

package/dist/unstable/webmcp/useWebMcpProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"useWebMcpProvider.js","names":["c","_c","useEffect","useState","useSyncExternalStore","useResources","useTapRoot","withKey","useAui","AssistantClient","Tool","getDefaultWebMcpHost","WebMcpHost","defaultWebMcpFilter","toWebMcpInputSchema","WebMcpRegistrationResource","shallowEqual","useModelContextSnapshot","ModelContextSnapshotSource","Unstable_WebMcpProviderOptions","filter","name","tool","Unstable_WebMcpProviderResult","status","registeredToolNames","EMPTY_NAMES","Object","freeze","EMPTY_TOOLS","Record","warned","WeakSet","signatures","WeakMap","description","signature","signatureOf","cached","get","JSON","stringify","set","NO_SUBSCRIPTION","modelContextToolSource","empty","read","aui","modelContext","getModelContext","tools","subscribe","onChange","useStableNames","names","cell","next","sort","previous","useWebMcpRegistry","t0","$","host","available","elements","entries","push","t1","error","has","add","console","warn","unstable_useWebMcpProvider","options","root","WebMcpProviderRoot","getValue","published","setPublished"],"sources":["../../../src/unstable/webmcp/useWebMcpProvider.ts"],"sourcesContent":["\"use client\";\n\nimport { useEffect, useState, useSyncExternalStore } from \"react\";\nimport { useResources, useTapRoot, withKey } from \"@assistant-ui/tap\";\nimport { useAui, type AssistantClient } from \"@assistant-ui/store\";\nimport type { Tool } from \"assistant-stream\";\nimport { getDefaultWebMcpHost, type WebMcpHost } from \"./webmcp-host\";\nimport { defaultWebMcpFilter, toWebMcpInputSchema } from \"./convertTools\";\nimport { WebMcpRegistrationResource } from \"./WebMcpRegistrationResource\";\nimport { shallowEqual } from \"@assistant-ui/store/internal\";\nimport {\n  useModelContextSnapshot,\n  type ModelContextSnapshotSource,\n} from \"../useModelContextSnapshot\";\n\nexport type Unstable_WebMcpProviderOptions = {\n  filter?: (name: string, tool: Tool<any, any>) => boolean;\n};\n\nexport type Unstable_WebMcpProviderResult = {\n  status: \"unsupported\" | \"active\";\n  registeredToolNames: readonly string[];\n};\n\nconst EMPTY_NAMES: readonly string[] = Object.freeze([]);\nconst EMPTY_TOOLS: Record<string, Tool<any, any>> = Object.freeze({});\n\n// The description is re-read on every sync so mutating it in place is\n// observed; the schema is converted only when the tool object itself changes.\n// Keyed on the tool so a schema or filter that throws warns once instead of\n// on every model-context notify.\nconst warned = new WeakSet<Tool<any, any>>();\n\nconst signatures = new WeakMap<\n  Tool<any, any>,\n  { description: string | undefined; signature: string }\n>();\n\nconst signatureOf = (tool: Tool<any, any>) => {\n  const cached = signatures.get(tool);\n  if (cached && cached.description === tool.description)\n    return cached.signature;\n  const signature = `${tool.description ?? \"\"}\\u0000${JSON.stringify(\n    toWebMcpInputSchema(tool),\n  )}`;\n  signatures.set(tool, { description: tool.description, signature });\n  return signature;\n};\n\nconst NO_SUBSCRIPTION = () => {};\n\n// No `isEqual`: a caller republishing an unchanged tool set is how it asks for\n// a re-sync, which is what re-attempts a tool whose filter has stopped throwing\n// and what picks up a description edited in place on a stable tool object.\nconst modelContextToolSource: ModelContextSnapshotSource<\n  Record<string, Tool<any, any>>\n> = {\n  empty: EMPTY_TOOLS,\n  read: (aui) => aui.modelContext.getModelContext().tools ?? EMPTY_TOOLS,\n  subscribe: (aui, onChange) =>\n    aui.modelContext.subscribe?.(onChange) ?? NO_SUBSCRIPTION,\n};\n\nconst useStableNames = (names: readonly (string | null)[]) => {\n  const [cell] = useState(() => ({ names: EMPTY_NAMES }));\n  const next = names.filter((name): name is string => name !== null).sort();\n  const previous = cell.names;\n  if (shallowEqual(previous, next)) {\n    return previous;\n  }\n  cell.names = next;\n  return next;\n};\n\nconst useWebMcpRegistry = ({\n  aui,\n  host,\n  filter,\n}: {\n  aui: AssistantClient;\n  host: WebMcpHost;\n  filter: (name: string, tool: Tool<any, any>) => boolean;\n}) => {\n  const tools = useModelContextSnapshot(\n    aui,\n    host.available,\n    modelContextToolSource,\n  );\n\n  const elements = [];\n  for (const [name, tool] of Object.entries(tools)) {\n    try {\n      if (!filter(name, tool)) continue;\n      const signature = signatureOf(tool);\n      elements.push(\n        withKey(\n          name,\n          WebMcpRegistrationResource({ host, name, signature, tool }),\n          [host, name, signature, tool],\n        ),\n      );\n    } catch (error) {\n      if (warned.has(tool)) continue;\n      warned.add(tool);\n      console.warn(\n        `[assistant-ui] Skipping WebMCP registration for tool \"${name}\": filter or schema conversion failed.`,\n        error,\n      );\n    }\n  }\n\n  return useStableNames(useResources(elements));\n};\n\n/**\n * Publishes the frontend tools in the model context to a WebMCP-capable\n * browser, so the user's own browser agent can call them.\n *\n * Returns `status: \"unsupported\"` when the page exposes no\n * `document.modelContext` (or `navigator.modelContext`), and the sorted names\n * of the tools currently registered with the host.\n */\nexport const unstable_useWebMcpProvider = (\n  options: Unstable_WebMcpProviderOptions = {},\n): Unstable_WebMcpProviderResult => {\n  const aui = useAui();\n  const [host] = useState(getDefaultWebMcpHost);\n  const filter = options.filter ?? defaultWebMcpFilter;\n\n  const root = useTapRoot(function WebMcpProviderRoot() {\n    return useWebMcpRegistry({ aui, host, filter });\n  });\n  const registeredToolNames = useSyncExternalStore(\n    root.subscribe,\n    root.getValue,\n    () => EMPTY_NAMES,\n  );\n\n  const [published, setPublished] = useState(false);\n  useEffect(() => {\n    if (host.available) setPublished(true);\n  }, [host]);\n\n  return {\n    status: published ? \"active\" : \"unsupported\",\n    registeredToolNames,\n  };\n};\n"],"mappings":"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"}
+{"version":3,"file":"useWebMcpProvider.js","names":["c","_c","useCallback","useEffect","useInsertionEffect","useRef","useState","useSyncExternalStore","useResources","useTapRoot","withKey","useAui","Tool","getDefaultWebMcpHost","WebMcpHost","defaultWebMcpFilter","toWebMcpInputSchema","WebMcpRegistrationResource","shallowEqual","useModelContextSnapshot","ModelContextSnapshotSource","Unstable_WebMcpProviderOptions","filter","name","tool","Unstable_WebMcpProviderResult","status","registeredToolNames","EMPTY_NAMES","Object","freeze","EMPTY_TOOLS","Record","warned","WeakSet","signatures","WeakMap","description","signature","signatureOf","cached","get","JSON","stringify","set","NO_SUBSCRIPTION","modelContextToolSource","empty","read","aui","modelContext","getModelContext","tools","subscribe","onChange","useStableNames","names","cell","next","sort","previous","useWebMcpRegistry","t0","$","host","getCurrentTool","elements","entries","push","t1","error","has","add","console","warn","unstable_useWebMcpProvider","options","available","currentToolsRef","current","root","WebMcpProviderRoot","getValue","published","setPublished"],"sources":["../../../src/unstable/webmcp/useWebMcpProvider.ts"],"sourcesContent":["\"use client\";\n\nimport {\n  useCallback,\n  useEffect,\n  useInsertionEffect,\n  useRef,\n  useState,\n  useSyncExternalStore,\n} from \"react\";\nimport { useResources, useTapRoot, withKey } from \"@assistant-ui/tap\";\nimport { useAui } from \"@assistant-ui/store\";\nimport type { Tool } from \"assistant-stream\";\nimport { getDefaultWebMcpHost, type WebMcpHost } from \"./webmcp-host\";\nimport { defaultWebMcpFilter, toWebMcpInputSchema } from \"./convertTools\";\nimport { WebMcpRegistrationResource } from \"./WebMcpRegistrationResource\";\nimport { shallowEqual } from \"@assistant-ui/store/internal\";\nimport {\n  useModelContextSnapshot,\n  type ModelContextSnapshotSource,\n} from \"../useModelContextSnapshot\";\n\nexport type Unstable_WebMcpProviderOptions = {\n  filter?: (name: string, tool: Tool<any, any>) => boolean;\n};\n\nexport type Unstable_WebMcpProviderResult = {\n  status: \"unsupported\" | \"active\";\n  registeredToolNames: readonly string[];\n};\n\nconst EMPTY_NAMES: readonly string[] = Object.freeze([]);\nconst EMPTY_TOOLS: Record<string, Tool<any, any>> = Object.freeze({});\n\n// The description is re-read on every sync so mutating it in place is\n// observed; the schema is converted only when the tool object itself changes.\n// Keyed on the tool so a schema or filter that throws warns once instead of\n// on every model-context notify.\nconst warned = new WeakSet<Tool<any, any>>();\n\nconst signatures = new WeakMap<\n  Tool<any, any>,\n  { description: string | undefined; signature: string }\n>();\n\nconst signatureOf = (tool: Tool<any, any>) => {\n  const cached = signatures.get(tool);\n  if (cached && cached.description === tool.description)\n    return cached.signature;\n  const signature = `${tool.description ?? \"\"}\\u0000${JSON.stringify(\n    toWebMcpInputSchema(tool),\n  )}`;\n  signatures.set(tool, { description: tool.description, signature });\n  return signature;\n};\n\nconst NO_SUBSCRIPTION = () => {};\n\n// No `isEqual`: a caller republishing an unchanged tool set is how it asks for\n// a re-sync, which is what re-attempts a tool whose filter has stopped throwing\n// and what picks up a description edited in place on a stable tool object.\nconst modelContextToolSource: ModelContextSnapshotSource<\n  Record<string, Tool<any, any>>\n> = {\n  empty: EMPTY_TOOLS,\n  read: (aui) => aui.modelContext.getModelContext().tools ?? EMPTY_TOOLS,\n  subscribe: (aui, onChange) =>\n    aui.modelContext.subscribe?.(onChange) ?? NO_SUBSCRIPTION,\n};\n\nconst useStableNames = (names: readonly (string | null)[]) => {\n  const [cell] = useState(() => ({ names: EMPTY_NAMES }));\n  const next = names.filter((name): name is string => name !== null).sort();\n  const previous = cell.names;\n  if (shallowEqual(previous, next)) {\n    return previous;\n  }\n  cell.names = next;\n  return next;\n};\n\nconst useWebMcpRegistry = ({\n  host,\n  filter,\n  tools,\n  getCurrentTool,\n}: {\n  host: WebMcpHost;\n  filter: (name: string, tool: Tool<any, any>) => boolean;\n  tools: Record<string, Tool<any, any>>;\n  getCurrentTool: (name: string) => Tool<any, any> | undefined;\n}) => {\n  const elements = [];\n  for (const [name, tool] of Object.entries(tools)) {\n    try {\n      if (!filter(name, tool)) continue;\n      const signature = signatureOf(tool);\n      elements.push(\n        withKey(\n          name,\n          WebMcpRegistrationResource({\n            host,\n            name,\n            signature,\n            tool,\n            getCurrentTool,\n          }),\n          [host, name, signature, tool, getCurrentTool],\n        ),\n      );\n    } catch (error) {\n      if (warned.has(tool)) continue;\n      warned.add(tool);\n      console.warn(\n        `[assistant-ui] Skipping WebMCP registration for tool \"${name}\": filter or schema conversion failed.`,\n        error,\n      );\n    }\n  }\n\n  return useStableNames(useResources(elements));\n};\n\n/**\n * Publishes the frontend tools in the model context to a WebMCP-capable\n * browser, so the user's own browser agent can call them.\n *\n * Returns `status: \"unsupported\"` when the page exposes no\n * `document.modelContext` (or `navigator.modelContext`), and the sorted names\n * of the tools currently registered with the host.\n */\nexport const unstable_useWebMcpProvider = (\n  options: Unstable_WebMcpProviderOptions = {},\n): Unstable_WebMcpProviderResult => {\n  const aui = useAui();\n  const [host] = useState(getDefaultWebMcpHost);\n  const filter = options.filter ?? defaultWebMcpFilter;\n  const tools = useModelContextSnapshot(\n    aui,\n    host.available,\n    modelContextToolSource,\n  );\n  const currentToolsRef = useRef(tools);\n  useInsertionEffect(() => {\n    currentToolsRef.current = tools;\n  }, [tools]);\n  const getCurrentTool = useCallback(\n    (name: string) => currentToolsRef.current[name],\n    [],\n  );\n\n  const root = useTapRoot(function WebMcpProviderRoot() {\n    return useWebMcpRegistry({\n      host,\n      filter,\n      tools,\n      getCurrentTool,\n    });\n  });\n  const registeredToolNames = useSyncExternalStore(\n    root.subscribe,\n    root.getValue,\n    () => EMPTY_NAMES,\n  );\n\n  const [published, setPublished] = useState(false);\n  useEffect(() => {\n    if (host.available) setPublished(true);\n  }, [host]);\n\n  return {\n    status: published ? \"active\" : \"unsupported\",\n    registeredToolNames,\n  };\n};\n"],"mappings":";;;;;;;;;;;AA+BA,MAAM4B,cAAiCC,OAAOC,OAAO,CAAA,CAAE;AACvD,MAAMC,cAA8CF,OAAOC,OAAO,CAAC,CAAC;AAMpE,MAAMG,yBAAS,IAAIC,QAAwB;AAE3C,MAAMC,6BAAa,IAAIC,QAGrB;AAEF,MAAMG,eAAef,SAAyB;CAC5C,MAAMgB,SAASL,WAAWM,IAAIjB,IAAI;CAClC,IAAIgB,UAAUA,OAAOH,gBAAgBb,KAAKa,aACxC,OAAOG,OAAOF;CAChB,MAAMA,YAAY,GAAGd,KAAKa,eAAe,GAAE,QAASK,KAAKC,UACvD3B,oBAAoBQ,IAAI,CAC1B;CACAW,WAAWS,IAAIpB,MAAM;EAAEa,aAAab,KAAKa;EAAaC;CAAU,CAAC;CACjE,OAAOA;AACT;AAEA,MAAMO,wBAAwB,CAAC;AAK/B,MAAMC,yBAEF;CACFC,OAAOhB;CACPiB,OAAOC,QAAQA,IAAIC,aAAaC,gBAAgB,CAAC,CAACC,SAASrB;CAC3DsB,YAAYJ,KAAKK,aACfL,IAAIC,aAAaG,YAAYC,QAAQ,KAAKT;AAC9C;AAEA,MAAMU,kBAAkBC,UAAsC;CAC5D,MAAM,CAACC,QAAQnD,gBAAgB,EAAEkD,OAAO5B,YAAY,EAAE;CACtD,MAAM8B,OAAOF,MAAMlC,QAAQC,SAAyBA,SAAS,IAAI,CAAC,CAACoC,KAAK;CACxE,MAAMC,WAAWH,KAAKD;CACtB,IAAItC,aAAa0C,UAAUF,IAAI,GAC7B,OAAOE;CAETH,KAAKD,QAAQE;CACb,OAAOA;AACT;AAEA,MAAMG,qBAAoBC,OAAA;CAAA,MAAAC,IAAA9D,EAAA,CAAA;CAAC,MAAA,EAAA+D,MAAA1C,QAAA8B,OAAAa,mBAAAH;CAU1B,IAAAI;CAAA,IAAAH,EAAA,OAAAzC,UAAAyC,EAAA,OAAAE,kBAAAF,EAAA,OAAAC,QAAAD,EAAA,OAAAX,OAAA;EACCc,WAAiB,CAAA;EACjB,KAAK,MAAA,CAAA3C,MAAAC,SAAsBK,OAAMsC,QAASf,KAAK,GAC7C,IAAA;GACE,IAAI,CAAC9B,OAAOC,MAAMC,IAAI,GAAG;GACzB,MAAAc,YAAkBC,YAAYf,IAAI;GAClC0C,SAAQE,KACN1D,QACEa,MACAN,2BAA2B;IAAA+C;IAAAzC;IAAAe;IAAAd;IAAAyC;GAM3B,CAAC,GACD;IAACD;IAAMzC;IAAMe;IAAWd;IAAMyC;GAAc,CAC9C,CACF;EAAC,SAAAI,IAAA;GACMC,MAAAA,QAAAA;GACP,IAAIrC,OAAMsC,IAAK/C,IAAI,GAAG;GACtBS,OAAMuC,IAAKhD,IAAI;GACfiD,QAAOC,KACL,yDAAyDnD,KAAI,yCAC7D+C,KACF;EAAC;EAEJP,EAAA,KAAAzC;EAAAyC,EAAA,KAAAE;EAAAF,EAAA,KAAAC;EAAAD,EAAA,KAAAX;EAAAW,EAAA,KAAAG;CAAA,OAAAA,WAAAH,EAAA;CAAA,OAEMR,eAAe/C,aAAa0D,QAAQ,CAAC;AAAC;;;;;;;;;AAW/C,MAAaS,8BACXC,UAA0C,CAAC,MACT;CAClC,MAAM3B,MAAMtC,OAAO;CACnB,MAAM,CAACqD,QAAQ1D,SAASO,oBAAoB;CAC5C,MAAMS,SAASsD,QAAQtD,UAAUP;CACjC,MAAMqC,QAAQjC,wBACZ8B,KACAe,KAAKa,WACL/B,sBACF;CACA,MAAMgC,kBAAkBzE,OAAO+C,KAAK;CACpChD,yBAAyB;EACvB0E,gBAAgBC,UAAU3B;CAC5B,GAAG,CAACA,KAAK,CAAC;CACV,MAAMa,iBAAiB/D,aACpBqB,SAAiBuD,gBAAgBC,QAAQxD,OAC1C,CAAA,CACF;CAEA,MAAMyD,OAAOvE,WAAW,SAASwE,qBAAqB;EACpD,OAAOpB,kBAAkB;GACvBG;GACA1C;GACA8B;GACAa;EACF,CAAC;CACH,CAAC;CACD,MAAMtC,sBAAsBpB,qBAC1ByE,KAAK3B,WACL2B,KAAKE,gBACCtD,WACR;CAEA,MAAM,CAACuD,WAAWC,gBAAgB9E,SAAS,KAAK;CAChDH,gBAAgB;EACd,IAAI6D,KAAKa,WAAWO,aAAa,IAAI;CACvC,GAAG,CAACpB,IAAI,CAAC;CAET,OAAO;EACLtC,QAAQyD,YAAY,WAAW;EAC/BxD;CACF;AACF"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@assistant-ui/react",
-  "version": "0.15.22",
+  "version": "0.15.23",
   "description": "Open-source TypeScript/React library for building production-grade AI chat experiences",
   "keywords": [
     "ai",
@@ -55,11 +55,11 @@
   ],
   "sideEffects": false,
   "dependencies": {
-    "@assistant-ui/core": "^0.3.21",
-    "@assistant-ui/store": "^0.3.15",
-    "@assistant-ui/tap": "^0.9.19",
-    "assistant-cloud": "^0.2.3",
-    "assistant-stream": "^0.3.45",
+    "@assistant-ui/core": "^0.3.22",
+    "@assistant-ui/store": "^0.3.16",
+    "@assistant-ui/tap": "^0.9.20",
+    "assistant-cloud": "^0.2.4",
+    "assistant-stream": "^0.3.46",
     "radix-ui": "^1.6.7",
     "react-textarea-autosize": "^8.5.9",
     "safe-content-frame": "^0.0.31",
@@ -83,6 +83,7 @@
   "devDependencies": {
     "@assistant-ui/vite": "0.0.19",
     "@assistant-ui/x-buildutils": "0.0.29",
+    "@assistant-ui/x-react18": "0.0.0",
     "@testing-library/react": "^16.3.3",
     "@types/json-schema": "^7.0.15",
     "@types/node": "^26.5.1",
@@ -110,6 +111,8 @@
     "build": "aui-build",
     "test": "vitest run",
     "typecheck": "tsc --noEmit",
-    "test:watch": "vitest"
+    "test:peer-react18": "vitest run --config vitest.peer-react18.config.ts",
+    "test:watch": "vitest",
+    "test:types:peer-react18": "aui-react18-types"
   }
 }

package/src/primitives/message/MessageIf.test.tsx

@@ -0,0 +1,72 @@
+// @vitest-environment jsdom
+
+import { render } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import type { ThreadMessageLike } from "@assistant-ui/core";
+import {
+  AssistantRuntimeProvider,
+  useExternalStoreRuntime,
+} from "@assistant-ui/core/react";
+import { useAuiState } from "@assistant-ui/store";
+import { ThreadPrimitiveMessages } from "../thread/ThreadMessages";
+import { ThreadPrimitiveRoot } from "../thread/ThreadRoot";
+import { MessagePrimitiveIf } from "./MessageIf";
+
+const messages: ThreadMessageLike[] = [
+  { id: "u", role: "user", content: [{ type: "text", text: "u" }] },
+  { id: "a", role: "assistant", content: [{ type: "text", text: "a" }] },
+  { id: "s", role: "system", content: [{ type: "text", text: "s" }] },
+];
+
+const roles = ["user", "assistant", "system"] as const;
+type Role = (typeof roles)[number];
+
+const roleFilter = (role: Role, value: boolean | undefined) =>
+  ({ [role]: value }) as MessagePrimitiveIf.Props;
+
+const renderRoles = (filter: MessagePrimitiveIf.Props) => {
+  const Message = () => {
+    const role = useAuiState((s) => s.message.role);
+    return (
+      <MessagePrimitiveIf {...filter}>
+        <span data-testid={`shown-${role}`} />
+      </MessagePrimitiveIf>
+    );
+  };
+  const Example = () => {
+    const runtime = useExternalStoreRuntime({
+      messages,
+      convertMessage: (message) => message,
+      onNew: async () => {},
+    });
+    return (
+      <AssistantRuntimeProvider runtime={runtime}>
+        <ThreadPrimitiveRoot>
+          <ThreadPrimitiveMessages components={{ Message }} />
+        </ThreadPrimitiveRoot>
+      </AssistantRuntimeProvider>
+    );
+  };
+  const { queryByTestId } = render(<Example />);
+  return roles.filter((role) => queryByTestId(`shown-${role}`) !== null);
+};
+
+describe("MessagePrimitive.If role filters", () => {
+  it.each(roles)("%s={true} renders only that role", (role) => {
+    expect(renderRoles(roleFilter(role, true))).toEqual([role]);
+  });
+
+  it.each(roles)("%s={false} renders every other role", (role) => {
+    expect(renderRoles(roleFilter(role, false))).toEqual(
+      roles.filter((r) => r !== role),
+    );
+  });
+
+  it.each(roles)("%s={undefined} renders every role", (role) => {
+    expect(renderRoles(roleFilter(role, undefined))).toEqual([...roles]);
+  });
+
+  it("combines a true filter with a false filter", () => {
+    expect(renderRoles({ assistant: false, system: false })).toEqual(["user"]);
+  });
+});

package/src/primitives/message/MessageIf.ts

@@ -34,9 +34,14 @@ const useMessageIf = (props: UseMessageIfProps) => {
 
     if (props.hasBranches === true && branchCount < 2) return false;
 
-    if (props.user && role !== "user") return false;
-    if (props.assistant && role !== "assistant") return false;
-    if (props.system && role !== "system") return false;
+    if (props.user === true && role !== "user") return false;
+    if (props.user === false && role === "user") return false;
+
+    if (props.assistant === true && role !== "assistant") return false;
+    if (props.assistant === false && role === "assistant") return false;
+
+    if (props.system === true && role !== "system") return false;
+    if (props.system === false && role === "system") return false;
 
     if (props.lastOrHover === true && !isHovering && !isLast) return false;
     if (props.last !== undefined && props.last !== isLast) return false;

package/src/primitives/thread/ThreadRoot.test.tsx

@@ -94,6 +94,7 @@ const dispatchEscape = (target: EventTarget) => {
     key: "Escape",
     bubbles: true,
     cancelable: true,
+    composed: true,
   });
   act(() => target.dispatchEvent(event));
   return event;
@@ -143,6 +144,135 @@ describe("ThreadPrimitiveRoot", () => {
     expect(event.defaultPrevented).toBe(false);
   });
 
+  it("does not stop speech in another mounted thread", async () => {
+    const firstSpeech = createSpeechAdapter();
+    const secondSpeech = createSpeechAdapter();
+    const firstRuntimeRef: RuntimeRef = { current: null };
+    const secondRuntimeRef: RuntimeRef = { current: null };
+    render(
+      <>
+        <RuntimeProvider
+          runtimeRef={firstRuntimeRef}
+          speech={firstSpeech.adapter}
+        >
+          <ThreadPrimitiveRoot>
+            <button data-testid="first-thread-control" />
+          </ThreadPrimitiveRoot>
+        </RuntimeProvider>
+        <RuntimeProvider
+          runtimeRef={secondRuntimeRef}
+          speech={secondSpeech.adapter}
+        >
+          <ThreadPrimitiveRoot>
+            <button data-testid="second-thread-control" />
+          </ThreadPrimitiveRoot>
+        </RuntimeProvider>
+      </>,
+    );
+    startSpeaking(firstRuntimeRef);
+    await waitFor(() => {
+      expect(firstRuntimeRef.current!.thread.getState().speech).toBeDefined();
+    });
+
+    const event = dispatchEscape(screen.getByTestId("second-thread-control"));
+
+    expect(firstSpeech.cancel).not.toHaveBeenCalled();
+    expect(secondSpeech.cancel).not.toHaveBeenCalled();
+    expect(event.defaultPrevented).toBe(false);
+  });
+
+  it("stops speech in the thread containing the Escape target", async () => {
+    const firstSpeech = createSpeechAdapter();
+    const secondSpeech = createSpeechAdapter();
+    const firstRuntimeRef: RuntimeRef = { current: null };
+    const secondRuntimeRef: RuntimeRef = { current: null };
+    render(
+      <>
+        <RuntimeProvider
+          runtimeRef={firstRuntimeRef}
+          speech={firstSpeech.adapter}
+        >
+          <ThreadPrimitiveRoot>
+            <button data-testid="first-thread-control" />
+          </ThreadPrimitiveRoot>
+        </RuntimeProvider>
+        <RuntimeProvider
+          runtimeRef={secondRuntimeRef}
+          speech={secondSpeech.adapter}
+        >
+          <ThreadPrimitiveRoot>
+            <button data-testid="second-thread-control" />
+          </ThreadPrimitiveRoot>
+        </RuntimeProvider>
+      </>,
+    );
+    startSpeaking(firstRuntimeRef);
+    startSpeaking(secondRuntimeRef);
+    await waitFor(() => {
+      expect(firstRuntimeRef.current!.thread.getState().speech).toBeDefined();
+      expect(secondRuntimeRef.current!.thread.getState().speech).toBeDefined();
+    });
+
+    const event = dispatchEscape(screen.getByTestId("second-thread-control"));
+
+    expect(firstSpeech.cancel).not.toHaveBeenCalled();
+    expect(secondSpeech.cancel).toHaveBeenCalledOnce();
+    expect(event.defaultPrevented).toBe(true);
+  });
+
+  it("stops speech in a thread mounted inside a closed shadow root", async () => {
+    const firstSpeech = createSpeechAdapter();
+    const secondSpeech = createSpeechAdapter();
+    const firstRuntimeRef: RuntimeRef = { current: null };
+    const secondRuntimeRef: RuntimeRef = { current: null };
+    render(
+      <RuntimeProvider
+        runtimeRef={firstRuntimeRef}
+        speech={firstSpeech.adapter}
+      >
+        <ThreadPrimitiveRoot />
+      </RuntimeProvider>,
+    );
+    const shadowHost = document.createElement("div");
+    const shadowRoot = shadowHost.attachShadow({ mode: "closed" });
+    const shadowContainer = document.createElement("div");
+    shadowRoot.append(shadowContainer);
+    document.body.append(shadowHost);
+    const shadowView = render(
+      <RuntimeProvider
+        runtimeRef={secondRuntimeRef}
+        speech={secondSpeech.adapter}
+      >
+        <ThreadPrimitiveRoot>
+          <button data-testid="shadow-thread-control" />
+        </ThreadPrimitiveRoot>
+      </RuntimeProvider>,
+      { container: shadowContainer },
+    );
+
+    try {
+      startSpeaking(firstRuntimeRef);
+      startSpeaking(secondRuntimeRef);
+      await waitFor(() => {
+        expect(firstRuntimeRef.current!.thread.getState().speech).toBeDefined();
+        expect(
+          secondRuntimeRef.current!.thread.getState().speech,
+        ).toBeDefined();
+      });
+
+      const event = dispatchEscape(
+        shadowContainer.querySelector("[data-testid=shadow-thread-control]")!,
+      );
+
+      expect(firstSpeech.cancel).not.toHaveBeenCalled();
+      expect(secondSpeech.cancel).toHaveBeenCalledOnce();
+      expect(event.defaultPrevented).toBe(true);
+    } finally {
+      shadowView.unmount();
+      shadowHost.remove();
+    }
+  });
+
   it("stops speech from outside the only mounted thread", async () => {
     const speech = createSpeechAdapter();
     const runtimeRef: RuntimeRef = { current: null };

package/src/primitives/thread/ThreadRoot.tsx

@@ -5,6 +5,7 @@ import {
   type ComponentRef,
   forwardRef,
   type ComponentPropsWithoutRef,
+  type KeyboardEventHandler,
   useEffect,
   useRef,
 } from "react";
@@ -12,6 +13,8 @@ import { useAui } from "@assistant-ui/store";
 import { useComposedRefs } from "radix-ui/internal";
 import { ThreadRootElementContext } from "./ThreadRootElementContext";
 
+const escapeEventThreadRoots = new WeakMap<KeyboardEvent, Element>();
+
 export namespace ThreadPrimitiveRoot {
   export type Element = ComponentRef<typeof Primitive.div>;
   /**
@@ -27,8 +30,9 @@ export namespace ThreadPrimitiveRoot {
  * This component serves as the foundational wrapper for all thread-related components.
  * It provides the basic structure and context needed for thread functionality.
  *
- * While this component is mounted, an unhandled Escape keydown stops active speech, even if
- * the action bar that started it is no longer mounted.
+ * While this component is mounted, an unhandled Escape keydown inside this thread stops its
+ * active speech, even if the action bar that started it is no longer mounted. Escape outside
+ * every thread retains the document-level fallback.
  *
  * @example
  * ```tsx
@@ -48,11 +52,29 @@ export const ThreadPrimitiveRoot = forwardRef<
   const aui = useAui();
   const rootRef = useRef<ThreadPrimitiveRoot.Element>(null);
   const composedRef = useComposedRefs(ref, rootRef);
+  const handleRootKeyDown: KeyboardEventHandler<ThreadPrimitiveRoot.Element> = (
+    event,
+  ) => {
+    if (event.key === "Escape" && rootRef.current) {
+      escapeEventThreadRoots.set(event.nativeEvent, rootRef.current);
+    }
+    props.onKeyDown?.(event);
+  };
 
   useEffect(() => {
     const handleKeyDown = (event: KeyboardEvent) => {
       if (event.key !== "Escape") return;
       if (event.defaultPrevented || aui.thread.source === null) return;
+      const eventThreadRoot =
+        escapeEventThreadRoots.get(event) ??
+        event
+          .composedPath()
+          .find(
+            (target) =>
+              target instanceof Element &&
+              target.hasAttribute("data-aui-thread-root"),
+          );
+      if (eventThreadRoot && eventThreadRoot !== rootRef.current) return;
       if (aui.thread.getState().speech == null) return;
       event.preventDefault();
       try {
@@ -77,7 +99,12 @@ export const ThreadPrimitiveRoot = forwardRef<
 
   return (
     <ThreadRootElementContext.Provider value={rootRef}>
-      <Primitive.div {...props} ref={composedRef} />
+      <Primitive.div
+        {...props}
+        data-aui-thread-root=""
+        ref={composedRef}
+        onKeyDown={handleRootKeyDown}
+      />
     </ThreadRootElementContext.Provider>
   );
 });

package/src/primitives/threadListItem/ThreadListItemRoot.tsx

@@ -40,6 +40,8 @@ export const ThreadListItemPrimitiveRoot = forwardRef<
   const direction = Direction.useDirection();
 
   const onKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {
+    if (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey)
+      return;
     const forwardKey = direction === "rtl" ? "ArrowLeft" : "ArrowRight";
     const backKey = direction === "rtl" ? "ArrowRight" : "ArrowLeft";
     const trigger = triggerRef.current;

package/src/primitives/threadListItem/ThreadListKeyboardNav.test.tsx

@@ -60,6 +60,36 @@ const menu = (): HTMLElement | null =>
   document.querySelector<HTMLElement>('[role="menu"]');
 
 describe("thread list keyboard navigation", () => {
+  it.each(["altKey", "ctrlKey", "metaKey", "shiftKey"])(
+    "leaves arrows modified with %s available to ancestor shortcuts",
+    (modifier) => {
+      const prevented: boolean[] = [];
+      const { container } = render(
+        <div onKeyDown={(event) => prevented.push(event.defaultPrevented)}>
+          <ThreadListPrimitiveRoot>
+            {[0, 1].map((i) => (
+              <ThreadListItemPrimitiveRoot key={i}>
+                <ThreadListItemPrimitiveTrigger>
+                  item {i}
+                </ThreadListItemPrimitiveTrigger>
+              </ThreadListItemPrimitiveRoot>
+            ))}
+          </ThreadListPrimitiveRoot>
+        </div>,
+      );
+      const [first, second] = triggers(container);
+
+      first!.focus();
+      fireEvent.keyDown(first!, { key: "ArrowDown", [modifier]: true });
+      expect(document.activeElement).toBe(first);
+
+      second!.focus();
+      fireEvent.keyDown(second!, { key: "ArrowUp", [modifier]: true });
+      expect(document.activeElement).toBe(second);
+      expect(prevented).toEqual([false, false]);
+    },
+  );
+
   it("moves focus between items with the up/down arrows", () => {
     const { container } = render(
       <ThreadListPrimitiveRoot>
@@ -102,6 +132,41 @@ describe("thread list keyboard navigation", () => {
     expect(menu()).not.toBeNull();
   });
 
+  it.each(["altKey", "ctrlKey", "metaKey", "shiftKey"])(
+    "leaves the More menu closed on ArrowRight modified with %s",
+    (modifier) => {
+      const { more } = renderItem();
+
+      more.focus();
+      const unhandled = fireEvent.keyDown(more, {
+        key: "ArrowRight",
+        [modifier]: true,
+      });
+
+      expect(menu()).toBeNull();
+      expect(document.activeElement).toBe(more);
+      expect(unhandled).toBe(true);
+    },
+  );
+
+  it.each(["altKey", "ctrlKey", "metaKey", "shiftKey"])(
+    "leaves the More menu open on ArrowLeft modified with %s",
+    (modifier) => {
+      renderItem({ defaultOpen: true });
+      const content = menu()!;
+
+      content.focus();
+      const unhandled = fireEvent.keyDown(content, {
+        key: "ArrowLeft",
+        [modifier]: true,
+      });
+
+      expect(menu()).toBe(content);
+      expect(document.activeElement).toBe(content);
+      expect(unhandled).toBe(true);
+    },
+  );
+
   it.each(["ArrowLeft", "Escape"])(
     "closes the menu on %s and returns focus to the More button",
     (key) => {

package/src/primitives/threadListItemMore/ThreadListItemMoreContent.tsx

@@ -54,6 +54,13 @@ export const ThreadListItemMorePrimitiveContent = forwardRef<
           {...props}
           onKeyDown={composeEventHandlers(props.onKeyDown, (event) => {
             if (!sharedFocusGroup || event.key !== closeKey) return;
+            if (
+              event.altKey ||
+              event.ctrlKey ||
+              event.metaKey ||
+              event.shiftKey
+            )
+              return;
             event.preventDefault();
             setOpen(false);
             focus?.moreRef.current?.focus();

package/src/primitives/threadListItemMore/ThreadListItemMoreTrigger.tsx

@@ -46,6 +46,8 @@ export const ThreadListItemMorePrimitiveTrigger = forwardRef<
         {...rest}
         onKeyDown={composeEventHandlers(rest.onKeyDown, (event) => {
           if (!sharedFocusGroup || event.key !== openKey) return;
+          if (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey)
+            return;
           event.preventDefault();
           setOpen(true);
         })}

package/src/tests/RemoteThreadListRuntime.reloadMainThread.test.tsx

@@ -5,7 +5,10 @@ import { type FC, useEffect } from "react";
 import { describe, expect, it } from "vitest";
 import type { AssistantRuntime } from "@assistant-ui/core";
 import { useRemoteThreadListRuntime } from "@assistant-ui/core/react";
-import { makeAdapter } from "./remote-thread-list-test-helpers";
+import {
+  makeAdapter,
+  settleOutsideAct,
+} from "./remote-thread-list-test-helpers";
 import { useLocalRuntime } from "../legacy-runtime/runtime-cores/local/useLocalRuntime";
 import { AssistantRuntimeProvider } from "../context";
 import type { ChatModelAdapter } from "../index";
@@ -74,15 +77,11 @@ describe("threads.reloadMainThread", () => {
     const capture = await renderThreadList(mounts);
     const runtime = capture.runtime!;
 
-    await act(async () => {
-      await runtime.threads.switchToThread("t-1");
-    });
+    await settleOutsideAct(() => runtime.threads.switchToThread("t-1"));
     const beforeReload = await settle(mounts);
     expect(beforeReload).toBeGreaterThan(0);
 
-    await act(async () => {
-      await runtime.threads.reloadMainThread();
-    });
+    await settleOutsideAct(() => runtime.threads.reloadMainThread());
 
     await waitFor(() => expect(mounts.count).toBeGreaterThan(beforeReload));
   });
@@ -92,18 +91,14 @@ describe("threads.reloadMainThread", () => {
     const capture = await renderThreadList(mounts);
     const runtime = capture.runtime!;
 
-    await act(async () => {
-      await runtime.threads.switchToThread("t-1");
-    });
+    await settleOutsideAct(() => runtime.threads.switchToThread("t-1"));
 
     const seen: boolean[] = [];
     const unsubscribe = runtime.threads.subscribe(() => {
       seen.push(runtime.threads.getState().mainThreadId === "t-1");
     });
 
-    await act(async () => {
-      await runtime.threads.reloadMainThread();
-    });
+    await settleOutsideAct(() => runtime.threads.reloadMainThread());
     unsubscribe();
 
     expect(seen.length).toBeGreaterThan(0);

package/src/tests/remote-thread-list-test-helpers.ts

@@ -1,3 +1,4 @@
+import { act, waitFor } from "@testing-library/react";
 import { vi } from "vitest";
 import type { RemoteThreadListAdapter } from "../index";
 
@@ -31,3 +32,17 @@ export function makeAdapter(
     ...overrides,
   };
 }
+
+// React 18's act holds renders until its callback settles, so a task that waits on a render starts inside act and settles outside it, where React can commit what the task waits on.
+export async function settleOutsideAct<T>(task: () => Promise<T>): Promise<T> {
+  let pending!: Promise<T>;
+  await act(async () => {
+    pending = task();
+    pending.catch(() => {});
+  });
+  await waitFor(() => pending.then(settled, settled));
+  await act(async () => {});
+  return pending;
+}
+
+const settled = () => {};

package/src/tests/threadListItemIsRunning.test.tsx

@@ -5,7 +5,10 @@ import { type FC, useEffect, useReducer } from "react";
 import { describe, expect, it } from "vitest";
 import type { ThreadMessage } from "@assistant-ui/core";
 import { useRemoteThreadListRuntime } from "@assistant-ui/core/react";
-import { makeAdapter } from "./remote-thread-list-test-helpers";
+import {
+  makeAdapter,
+  settleOutsideAct,
+} from "./remote-thread-list-test-helpers";
 import { AssistantRuntimeProvider } from "../context";
 import * as ThreadListPrimitive from "../primitives/threadList";
 import {
@@ -172,9 +175,9 @@ describe("threadListItem.isRunning", () => {
     });
     await waitFor(() => expect(screen.getByTestId("item-t-1")).toBeTruthy());
 
-    await act(async () => {
-      await capture.runtime!.threads.switchToThread("t-1");
-    });
+    await settleOutsideAct(() =>
+      capture.runtime!.threads.switchToThread("t-1"),
+    );
     await act(async () => {
       setRunning("t-1", true);
     });
@@ -182,9 +185,9 @@ describe("threadListItem.isRunning", () => {
       expect(screen.getByTestId("item-t-1").textContent).toBe("running"),
     );
 
-    await act(async () => {
-      await capture.runtime!.threads.switchToThread("t-2");
-    });
+    await settleOutsideAct(() =>
+      capture.runtime!.threads.switchToThread("t-2"),
+    );
 
     expect(screen.getByTestId("item-t-1").textContent).toBe("running");
     expect(screen.getByTestId("item-t-2").textContent).toBe("idle");