@assistant-ui/react 0.15.17 → 0.15.18

package/src/unstable/useModelContextSnapshot.ts

@@ -0,0 +1,67 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import type { AssistantClient } from "@assistant-ui/store";
+import type { Unsubscribe } from "@assistant-ui/core";
+
+/**
+ * Where a snapshot comes from and what counts as a change to it. Declared once
+ * per consumer at module scope: the subscription effect keys on this object, so
+ * an inline source without an `isEqual` re-reads itself into a render loop.
+ */
+export type ModelContextSnapshotSource<T> = {
+  /** Seeds the snapshot when it starts disabled. */
+  readonly empty: T;
+  /** Projects the fields the consumer observes out of the live model context. */
+  read(aui: AssistantClient): T;
+  subscribe(aui: AssistantClient, onChange: () => void): Unsubscribe;
+  /**
+   * An equal pair keeps the previous reference. Omitted by a consumer that
+   * re-derives on every notification, where a caller republishing an unchanged
+   * tool set is how it asks to be re-run.
+   */
+  isEqual?(previous: T, next: T): boolean;
+};
+
+/**
+ * `getModelContext()` rebuilds its result on every call, so a projection of the
+ * fields a consumer observes is held in state and refreshed on notification
+ * rather than read during render. Keeping the previous reference for an equal
+ * projection is what stops a notification carrying no observable change from
+ * invalidating everything derived from it.
+ */
+export const useModelContextSnapshot = <T>(
+  aui: AssistantClient,
+  enabled: boolean,
+  source: ModelContextSnapshotSource<T>,
+): T => {
+  const [snapshot, setSnapshot] = useState(() =>
+    enabled ? source.read(aui) : source.empty,
+  );
+
+  useEffect(() => {
+    if (!enabled) return undefined;
+    const read = () => {
+      const next = source.read(aui);
+      setSnapshot((previous) =>
+        source.isEqual?.(previous, next) ? previous : next,
+      );
+    };
+    read();
+    return source.subscribe(aui, read);
+  }, [aui, enabled, source]);
+
+  return snapshot;
+};
+
+/** Shallow own-key comparison, for a projection whose values are records. */
+export const shallowEqualRecords = (
+  previous: Readonly<Record<string, unknown>>,
+  next: Readonly<Record<string, unknown>>,
+): boolean => {
+  const keys = Object.keys(previous);
+  if (keys.length !== Object.keys(next).length) return false;
+  return keys.every(
+    (key) => Object.hasOwn(next, key) && previous[key] === next[key],
+  );
+};

package/src/unstable/useSlashCommandAdapter.ts

@@ -6,6 +6,7 @@ import type {
   Unstable_TriggerItem,
 } from "@assistant-ui/core";
 import type { Unstable_IconComponent } from "./useMentionAdapter";
+import { matchesTriggerItemQuery } from "../primitives/composer/trigger/matchesTriggerItemQuery";
 
 export type Unstable_SlashCommand = {
   readonly id: string;
@@ -81,7 +82,7 @@ export function unstable_useSlashCommandAdapter(
       categoryItems: () => [],
       search: (query: string) => {
         const lower = query.toLowerCase();
-        return items.filter((item) => matchesQuery(item, lower));
+        return items.filter((item) => matchesTriggerItemQuery(item, lower));
       },
     }),
     [items],
@@ -118,14 +119,6 @@ function toItem(cmd: Unstable_SlashCommand): Unstable_TriggerItem {
   };
 }
 
-function matchesQuery(item: Unstable_TriggerItem, lower: string): boolean {
-  if (!lower) return true;
-  if (item.id.toLowerCase().includes(lower)) return true;
-  if (item.label.toLowerCase().includes(lower)) return true;
-  if (item.description?.toLowerCase().includes(lower)) return true;
-  return false;
-}
-
 function areTriggerItemsEqual(
   previous: readonly Unstable_TriggerItem[] | undefined,
   next: readonly Unstable_TriggerItem[],

package/src/unstable/webmcp/WebMcpRegistrationResource.ts

@@ -0,0 +1,92 @@
+import { useEffect, useRef, useState } from "react";
+import { resource } from "@assistant-ui/tap";
+import type { Tool } from "assistant-stream";
+import { toWebMcpTool } from "./convertTools";
+import type { WebMcpHost } from "./webmcp-host";
+
+export type WebMcpRegistrationProps = {
+  host: WebMcpHost;
+  name: string;
+  /** Re-registers when it changes; an execute-only edit reads through instead. */
+  signature: string;
+  tool: Tool<any, any>;
+};
+
+// The explainer specifies NotAllowedError for a page whose tools permission is
+// off, which a cross-origin iframe without allow="tools" reaches routinely. It
+// documents no rejection for a name already taken, so that stays a hedge.
+const notPermitted = (error: unknown) =>
+  (error as { name?: unknown } | null | undefined)?.name === "NotAllowedError";
+
+const notPermittedMessage = (name: string) =>
+  `[assistant-ui] WebMCP registration for tool "${name}" was not permitted; the page's tools permission is disabled.`;
+
+const useWebMcpRegistration = ({
+  host,
+  name,
+  signature,
+  tool,
+}: WebMcpRegistrationProps): string | null => {
+  // A refused name is remembered for as long as the tool stays in the model
+  // context, so a permanent collision warns once rather than on every sync.
+  const [refused, setRefused] = useState(false);
+  const toolRef = useRef(tool);
+  // Commit phase, so an abandoned render cannot hand the host a tool the tree
+  // never committed.
+  useEffect(() => {
+    toolRef.current = tool;
+  }, [tool]);
+
+  useEffect(() => {
+    if (refused) return undefined;
+
+    const lifecycle = new AbortController();
+    let live = true;
+    let dispose: (() => void) | undefined;
+
+    const refuse = (message: string, error: unknown) => {
+      if (!live) return;
+      live = false;
+      setRefused(true);
+      console.warn(message, error);
+    };
+
+    try {
+      dispose = host.registerTool(
+        toWebMcpTool(name, () => toolRef.current, lifecycle.signal),
+        (error) =>
+          refuse(
+            notPermitted(error)
+              ? notPermittedMessage(name)
+              : `[assistant-ui] WebMCP registration for tool "${name}" failed (name may already be registered).`,
+            error,
+          ),
+      );
+    } catch (error) {
+      refuse(
+        notPermitted(error)
+          ? notPermittedMessage(name)
+          : `[assistant-ui] Skipping WebMCP registration for tool "${name}": registerTool failed (name may already be registered).`,
+        error,
+      );
+      return undefined;
+    }
+
+    return () => {
+      live = false;
+      lifecycle.abort();
+      try {
+        dispose();
+      } catch (error) {
+        console.warn(
+          `[assistant-ui] Unregistering WebMCP tool "${name}" failed.`,
+          error,
+        );
+      }
+    };
+  }, [host, name, signature, refused]);
+
+  return refused ? null : name;
+};
+
+export const WebMcpRegistrationResource = resource(useWebMcpRegistration);

package/src/unstable/webmcp/__tests__/webmcp.fake.tsx

@@ -0,0 +1,168 @@
+import { useEffect, type ReactNode } from "react";
+import { render } from "@testing-library/react";
+import { expect, vi } from "vitest";
+import { AuiConfig, AuiProvider, useAui } from "@assistant-ui/store";
+import { ModelContext } from "@assistant-ui/core/store";
+import type { ModelContextProvider } from "@assistant-ui/core";
+import type { Tool } from "assistant-stream";
+import type {
+  WebMcpHost,
+  WebMcpModelContext,
+  WebMcpToolDescriptor,
+} from "../webmcp-host";
+import {
+  unstable_useWebMcpProvider,
+  type Unstable_WebMcpProviderOptions,
+  type Unstable_WebMcpProviderResult,
+} from "../useWebMcpProvider";
+
+export type FakeWebMcpHost = WebMcpHost & {
+  registry: Map<string, WebMcpToolDescriptor>;
+  registerCalls: string[];
+  unregisterCalls: string[];
+};
+
+export const createFakeWebMcpHost = (): FakeWebMcpHost => {
+  const registry = new Map<string, WebMcpToolDescriptor>();
+  const registerCalls: string[] = [];
+  const unregisterCalls: string[] = [];
+
+  return {
+    available: true,
+    registry,
+    registerCalls,
+    unregisterCalls,
+    registerTool: (def) => {
+      if (registry.has(def.name)) {
+        throw new Error(`Tool "${def.name}" is already registered`);
+      }
+      registry.set(def.name, def);
+      registerCalls.push(def.name);
+      let disposed = false;
+      return () => {
+        if (disposed) return;
+        disposed = true;
+        if (registry.get(def.name) === def) registry.delete(def.name);
+        unregisterCalls.push(def.name);
+      };
+    },
+  };
+};
+
+// Mirrors the spec's registerTool: the tool enters the map synchronously while
+// the promise resolves on a later task, aborting removes it and rejects, and a
+// name already in the map is refused.
+export const createAsyncModelContext = (): Map<
+  string,
+  WebMcpToolDescriptor
+> => {
+  const registry = new Map<string, WebMcpToolDescriptor>();
+  const context: WebMcpModelContext = {
+    registerTool: (tool, options) => {
+      if (registry.has(tool.name)) {
+        return Promise.reject(
+          new DOMException(
+            `Tool "${tool.name}" is already registered`,
+            "InvalidStateError",
+          ),
+        );
+      }
+      registry.set(tool.name, tool);
+      return new Promise<void>((resolve, reject) => {
+        options?.signal?.addEventListener("abort", () => {
+          registry.delete(tool.name);
+          reject(options.signal?.reason);
+        });
+        setTimeout(() => resolve(), 0);
+      });
+    },
+  };
+  (document as { modelContext?: WebMcpModelContext }).modelContext = context;
+  return registry;
+};
+
+export const frontendTool = (
+  overrides: Partial<Tool<any, any>> = {},
+): Tool<any, any> =>
+  ({
+    type: "frontend",
+    description: "search things",
+    parameters: { type: "object", properties: {} },
+    execute: async () => "found",
+    ...overrides,
+  }) as Tool<any, any>;
+
+export type FakeProvider = ModelContextProvider & {
+  setTools: (next: Record<string, Tool<any, any>>) => void;
+};
+
+export const createProvider = (
+  initialTools: Record<string, Tool<any, any>>,
+): FakeProvider => {
+  let tools = initialTools;
+  const listeners = new Set<() => void>();
+  return {
+    getModelContext: () => ({ tools }),
+    subscribe: (callback: () => void) => {
+      listeners.add(callback);
+      return () => {
+        listeners.delete(callback);
+      };
+    },
+    setTools: (next) => {
+      tools = next;
+      listeners.forEach((callback) => callback());
+    },
+  } as FakeProvider;
+};
+
+let latest: Unstable_WebMcpProviderResult;
+
+export const providerResult = (): Unstable_WebMcpProviderResult => latest;
+
+const Probe = ({ options }: { options: Unstable_WebMcpProviderOptions }) => {
+  latest = unstable_useWebMcpProvider(options);
+  return null;
+};
+
+const Registrar = ({ provider }: { provider: ModelContextProvider }) => {
+  const aui = useAui();
+  useEffect(() => aui.modelContext.register(provider), [aui, provider]);
+  return null;
+};
+
+const Harness = ({
+  provider,
+  options,
+}: {
+  provider: ModelContextProvider;
+  options: Unstable_WebMcpProviderOptions;
+}) => (
+  <AuiProvider config={AuiConfig({ modelContext: ModelContext() } as never)}>
+    <Registrar provider={provider} />
+    <Probe options={options} />
+  </AuiProvider>
+);
+
+export const mountProvider = (
+  provider: ModelContextProvider,
+  options: Unstable_WebMcpProviderOptions = {},
+  wrap: (children: ReactNode) => ReactNode = (children) => children,
+) => {
+  const view = render(
+    <>{wrap(<Harness provider={provider} options={options} />)}</>,
+  );
+  return {
+    view,
+    rerender: (next: Unstable_WebMcpProviderOptions) =>
+      view.rerender(
+        <>{wrap(<Harness provider={provider} options={next} />)}</>,
+      ),
+  };
+};
+
+export const waitForNames = (names: string[]) =>
+  vi.waitFor(() => expect(providerResult().registeredToolNames).toEqual(names));
+
+export const silenceWarnings = () =>
+  vi.spyOn(console, "warn").mockImplementation(() => {});