@assistant-ui/react 0.14.24 → 0.14.27

package/src/mcp-apps/McpAppsRemoteHost.test.ts

@@ -0,0 +1,126 @@
+import { createTapRoot, useResource } from "@assistant-ui/tap";
+import { describe, expect, it, vi } from "vitest";
+import { McpAppsRemoteHost } from "./McpAppsRemoteHost";
+
+const mount = (fetch: typeof globalThis.fetch) =>
+  createTapRoot(function Root() {
+    return useResource(
+      McpAppsRemoteHost({
+        url: "/api/mcp-apps",
+        fetch,
+      }),
+    );
+  });
+
+describe("McpAppsRemoteHost", () => {
+  it("posts the requested method and params to the host route", async () => {
+    const fetch = vi.fn(async () =>
+      Response.json({ content: [{ type: "text", text: "ok" }] }),
+    ) as unknown as typeof globalThis.fetch;
+    const root = mount(fetch);
+
+    try {
+      await expect(
+        root.getValue().callTool({
+          name: "search",
+          arguments: { query: "docs" },
+        }),
+      ).resolves.toEqual({ content: [{ type: "text", text: "ok" }] });
+
+      expect(fetch).toHaveBeenCalledWith("/api/mcp-apps", {
+        method: "POST",
+        headers: { "content-type": "application/json" },
+        body: JSON.stringify({
+          method: "tools/call",
+          params: { name: "search", arguments: { query: "docs" } },
+        }),
+      });
+    } finally {
+      root.unmount();
+    }
+  });
+
+  it("posts serverId params verbatim for tool calls and resource loads", async () => {
+    const fetch = vi.fn(async () =>
+      Response.json({ content: [{ type: "text", text: "ok" }] }),
+    ) as unknown as typeof globalThis.fetch;
+    const root = mount(fetch);
+
+    try {
+      await root.getValue().callTool({
+        name: "search",
+        arguments: { query: "docs" },
+        serverId: "search-server",
+      });
+      await root.getValue().loadResource({
+        uri: "ui://example/search",
+        serverId: "search-server",
+      });
+
+      expect(fetch).toHaveBeenNthCalledWith(1, "/api/mcp-apps", {
+        method: "POST",
+        headers: { "content-type": "application/json" },
+        body: JSON.stringify({
+          method: "tools/call",
+          params: {
+            name: "search",
+            arguments: { query: "docs" },
+            serverId: "search-server",
+          },
+        }),
+      });
+      expect(fetch).toHaveBeenNthCalledWith(2, "/api/mcp-apps", {
+        method: "POST",
+        headers: { "content-type": "application/json" },
+        body: JSON.stringify({
+          method: "mcp-apps/read-resource",
+          params: {
+            uri: "ui://example/search",
+            serverId: "search-server",
+          },
+        }),
+      });
+    } finally {
+      root.unmount();
+    }
+  });
+
+  it("includes method, url, status, and text body in host request errors", async () => {
+    const fetch = vi.fn(
+      async () =>
+        new Response("Missing tool name", {
+          status: 500,
+          statusText: "Internal Server Error",
+        }),
+    ) as unknown as typeof globalThis.fetch;
+    const root = mount(fetch);
+
+    try {
+      await expect(
+        root.getValue().callTool({ name: "search" }),
+      ).rejects.toThrow(
+        'MCP App host request "tools/call" to "/api/mcp-apps" failed with 500 Internal Server Error: Missing tool name',
+      );
+    } finally {
+      root.unmount();
+    }
+  });
+
+  it("uses JSON error messages from failed host responses", async () => {
+    const fetch = vi.fn(async () =>
+      Response.json(
+        { error: { message: "resources/list is not supported" } },
+        { status: 400, statusText: "Bad Request" },
+      ),
+    ) as unknown as typeof globalThis.fetch;
+    const root = mount(fetch);
+
+    try {
+      await expect(root.getValue().listResources()).rejects.toThrow(
+        'MCP App host request "resources/list" to "/api/mcp-apps" failed with 400 Bad Request: resources/list is not supported',
+      );
+    } finally {
+      root.unmount();
+    }
+  });
+});

package/src/mcp-apps/McpAppsRemoteHost.ts

@@ -6,6 +6,39 @@ import type {
   McpAppsRemoteHostOptions,
 } from "./types";
 
+const truncateBody = (body: string) =>
+  body.length > 500 ? `${body.slice(0, 500)}...` : body;
+
+const extractErrorBody = (body: string): string | undefined => {
+  const trimmed = body.trim();
+  if (!trimmed) return undefined;
+
+  try {
+    const parsed = JSON.parse(trimmed) as unknown;
+    if (parsed && typeof parsed === "object") {
+      const record = parsed as Record<string, unknown>;
+      if (typeof record.message === "string") return record.message;
+      if (typeof record.error === "string") return record.error;
+      if (record.error && typeof record.error === "object") {
+        const error = record.error as Record<string, unknown>;
+        if (typeof error.message === "string") return error.message;
+      }
+    }
+  } catch {
+    return truncateBody(trimmed);
+  }
+
+  return truncateBody(trimmed);
+};
+
+const readErrorBody = async (res: Response): Promise<string | undefined> => {
+  try {
+    return extractErrorBody(await res.text());
+  } catch {
+    return undefined;
+  }
+};
+
 async function postToHost(
   options: McpAppsRemoteHostOptions,
   method: string,
@@ -22,7 +55,13 @@ async function postToHost(
     body: JSON.stringify({ method, params }),
   });
   if (!res.ok) {
-    throw new Error(`MCP App host request failed: ${res.status}`);
+    const status = res.statusText
+      ? `${res.status} ${res.statusText}`
+      : `${res.status}`;
+    const body = await readErrorBody(res);
+    throw new Error(
+      `MCP App host request "${method}" to "${options.url}" failed with ${status}${body ? `: ${body}` : ""}`,
+    );
   }
   return res.json();
 }

package/src/mcp-apps/app-frame.tsx

@@ -246,7 +246,9 @@ export function McpAppFrame({
   return (
     <SandboxHost
       content={{ html: resource.html }}
-      contentKey={resource.uri}
+      contentKey={
+        app.serverId ? `${app.serverId} ${resource.uri}` : resource.uri
+      }
       sandbox={{ ...sandbox, product: sandbox?.product ?? DEFAULT_PRODUCT }}
       maxHeight={maxHeight}
       createBridge={createBridge}

package/src/mcp-apps/bridge.ts

@@ -10,7 +10,7 @@ import {
   type McpAppJsonRpcRequest,
   type McpAppJsonRpcResponse,
 } from "./types";
-import { isRecord } from "../utils/json/is-json";
+import { isRecord } from "@assistant-ui/core/internal";
 
 const VALID_DISPLAY_MODES = [
   "inline",

package/src/mcp-apps/types.ts

@@ -51,19 +51,27 @@ export type McpAppHostInfo = {
  * `McpAppsRemoteHost`.
  */
 export type McpAppsHost = {
-  loadResource: (params: { uri: string }) => Promise<McpAppResource>;
-  callTool: (params: McpAppToolCallParams) => Promise<unknown>;
-  readResource: (params: { uri: string }) => Promise<unknown>;
+  loadResource: (params: {
+    uri: string;
+    serverId?: string;
+  }) => Promise<McpAppResource>;
+  callTool: (
+    params: McpAppToolCallParams & { serverId?: string },
+  ) => Promise<unknown>;
+  readResource: (params: {
+    uri: string;
+    serverId?: string;
+  }) => Promise<unknown>;
   listResources: (params?: unknown) => Promise<unknown>;
 };
 
 /**
  * Options for `McpAppsRemoteHost`. The host POSTs `{ method, params }` to
- * `url` and expects JSON responses. Method names sent:
- * - `mcp-apps/read-resource` (`{ uri }`) → `McpAppResource`
- * - `tools/call` (`{ name, arguments? }`) → tool result
- * - `resources/read` (`{ uri }`) → resource read result
- * - `resources/list` (`params?`) → list result
+ * `url` and expects JSON responses. Params may carry `serverId` for host-side routing. Method names sent:
+ * - `mcp-apps/read-resource` (`{ uri, serverId? }`) → `McpAppResource`
+ * - `tools/call` (`{ name, arguments?, serverId? }`) → tool result
+ * - `resources/read` (`{ uri, serverId? }`) → resource read result
+ * - `resources/list` (`{ serverId?, ...params }?`) → list result
  */
 export type McpAppsRemoteHostOptions = {
   url: string;

package/src/primitives/assistantModal/AssistantModalAnchor.tsx

@@ -1,16 +1,14 @@
 "use client";
 
-import {
-  type ComponentPropsWithoutRef,
-  type ComponentRef,
-  forwardRef,
-} from "react";
-import { Popover as PopoverPrimitive } from "radix-ui";
+import { type ComponentRef, forwardRef } from "react";
+import type { Popover as PopoverPrimitive } from "radix-ui";
+import type { WithRenderPropProps } from "../../utils/Primitive";
+import { PopoverRenderAnchor } from "./popoverRenderPrimitives";
 import { type ScopedProps, usePopoverScope } from "./scope";
 
 export namespace AssistantModalPrimitiveAnchor {
   export type Element = ComponentRef<typeof PopoverPrimitive.Anchor>;
-  export type Props = ComponentPropsWithoutRef<typeof PopoverPrimitive.Anchor>;
+  export type Props = WithRenderPropProps<typeof PopoverPrimitive.Anchor>;
 }
 
 export const AssistantModalPrimitiveAnchor = forwardRef<
@@ -26,7 +24,7 @@ export const AssistantModalPrimitiveAnchor = forwardRef<
   ) => {
     const scope = usePopoverScope(__scopeAssistantModal);
 
-    return <PopoverPrimitive.Anchor {...scope} {...rest} ref={ref} />;
+    return <PopoverRenderAnchor {...scope} {...rest} ref={ref} />;
   },
 );
 AssistantModalPrimitiveAnchor.displayName = "AssistantModalPrimitive.Anchor";

package/src/primitives/assistantModal/AssistantModalContent.tsx

@@ -6,14 +6,14 @@ import {
   forwardRef,
 } from "react";
 import { Popover as PopoverPrimitive } from "radix-ui";
-import { type ScopedProps, usePopoverScope } from "./scope";
 import { composeEventHandlers } from "@radix-ui/primitive";
+import type { WithRenderPropProps } from "../../utils/Primitive";
+import { PopoverRenderContent } from "./popoverRenderPrimitives";
+import { type ScopedProps, usePopoverScope } from "./scope";
 
 export namespace AssistantModalPrimitiveContent {
   export type Element = ComponentRef<typeof PopoverPrimitive.Content>;
-  export type Props = ComponentPropsWithoutRef<
-    typeof PopoverPrimitive.Content
-  > & {
+  export type Props = WithRenderPropProps<typeof PopoverPrimitive.Content> & {
     portalProps?:
       | ComponentPropsWithoutRef<typeof PopoverPrimitive.Portal>
       | undefined;
@@ -41,7 +41,7 @@ export const AssistantModalPrimitiveContent = forwardRef<
 
     return (
       <PopoverPrimitive.Portal {...scope} {...portalProps}>
-        <PopoverPrimitive.Content
+        <PopoverRenderContent
           {...scope}
           {...props}
           ref={forwardedRef}

package/src/primitives/assistantModal/AssistantModalTrigger.test.tsx

@@ -0,0 +1,80 @@
+import { renderToStaticMarkup } from "react-dom/server";
+import { describe, expect, it, vi } from "vitest";
+import { AssistantModalPrimitiveAnchor } from "./AssistantModalAnchor";
+import { AssistantModalPrimitiveContent } from "./AssistantModalContent";
+import { AssistantModalPrimitiveRoot } from "./AssistantModalRoot";
+import { AssistantModalPrimitiveTrigger } from "./AssistantModalTrigger";
+
+vi.mock("@assistant-ui/store", async (importOriginal) => {
+  const actual = await importOriginal<typeof import("@assistant-ui/store")>();
+  return {
+    ...actual,
+    useAui: () => ({
+      on: () => () => {},
+    }),
+  };
+});
+
+describe("AssistantModalPrimitive render props", () => {
+  it("Trigger render matches asChild", () => {
+    const renderHtml = renderToStaticMarkup(
+      <AssistantModalPrimitiveRoot open>
+        <AssistantModalPrimitiveTrigger
+          render={<button type="button" className="trigger" />}
+        >
+          Open
+        </AssistantModalPrimitiveTrigger>
+      </AssistantModalPrimitiveRoot>,
+    );
+
+    const asChildHtml = renderToStaticMarkup(
+      <AssistantModalPrimitiveRoot open>
+        <AssistantModalPrimitiveTrigger asChild>
+          <button type="button" className="trigger">
+            Open
+          </button>
+        </AssistantModalPrimitiveTrigger>
+      </AssistantModalPrimitiveRoot>,
+    );
+
+    expect(renderHtml).toBe(asChildHtml);
+    expect(renderHtml).toContain('class="trigger"');
+    expect(renderHtml).toContain("Open");
+    expect(renderHtml).toContain('type="button"');
+    expect(renderHtml).toMatch(/aria-haspopup|aria-expanded|data-state/);
+  });
+
+  it("Anchor render matches asChild", () => {
+    const renderHtml = renderToStaticMarkup(
+      <AssistantModalPrimitiveRoot open>
+        <AssistantModalPrimitiveAnchor render={<div className="anchor" />}>
+          Anchor
+        </AssistantModalPrimitiveAnchor>
+      </AssistantModalPrimitiveRoot>,
+    );
+
+    const asChildHtml = renderToStaticMarkup(
+      <AssistantModalPrimitiveRoot open>
+        <AssistantModalPrimitiveAnchor asChild>
+          <div className="anchor">Anchor</div>
+        </AssistantModalPrimitiveAnchor>
+      </AssistantModalPrimitiveRoot>,
+    );
+
+    expect(renderHtml).toBe(asChildHtml);
+    expect(renderHtml).toContain('class="anchor"');
+    expect(renderHtml).toContain("Anchor");
+  });
+
+  it("accepts render on Trigger, Anchor, and Content", () => {
+    const tree = (
+      <AssistantModalPrimitiveRoot open>
+        <AssistantModalPrimitiveTrigger render={<button type="button" />} />
+        <AssistantModalPrimitiveAnchor render={<div />} />
+        <AssistantModalPrimitiveContent render={<div />} />
+      </AssistantModalPrimitiveRoot>
+    );
+
+    expect(tree).toBeTruthy();
+  });
+});

package/src/primitives/assistantModal/AssistantModalTrigger.tsx

@@ -1,14 +1,12 @@
-import {
-  type ComponentPropsWithoutRef,
-  type ComponentRef,
-  forwardRef,
-} from "react";
-import { Popover as PopoverPrimitive } from "radix-ui";
+import { type ComponentRef, forwardRef } from "react";
+import type { Popover as PopoverPrimitive } from "radix-ui";
+import type { WithRenderPropProps } from "../../utils/Primitive";
+import { PopoverRenderTrigger } from "./popoverRenderPrimitives";
 import { type ScopedProps, usePopoverScope } from "./scope";
 
 export namespace AssistantModalPrimitiveTrigger {
   export type Element = ComponentRef<typeof PopoverPrimitive.Trigger>;
-  export type Props = ComponentPropsWithoutRef<typeof PopoverPrimitive.Trigger>;
+  export type Props = WithRenderPropProps<typeof PopoverPrimitive.Trigger>;
 }
 
 export const AssistantModalPrimitiveTrigger = forwardRef<
@@ -24,7 +22,7 @@ export const AssistantModalPrimitiveTrigger = forwardRef<
   ) => {
     const scope = usePopoverScope(__scopeAssistantModal);
 
-    return <PopoverPrimitive.Trigger {...scope} {...rest} ref={ref} />;
+    return <PopoverRenderTrigger {...scope} {...rest} ref={ref} />;
   },
 );
 

package/src/primitives/assistantModal/popoverRenderPrimitives.ts

@@ -0,0 +1,6 @@
+import { Popover as PopoverPrimitive } from "radix-ui";
+import { withRenderProp } from "../../utils/Primitive";
+
+export const PopoverRenderTrigger = withRenderProp(PopoverPrimitive.Trigger);
+export const PopoverRenderAnchor = withRenderProp(PopoverPrimitive.Anchor);
+export const PopoverRenderContent = withRenderProp(PopoverPrimitive.Content);

package/src/primitives/composer/ComposerCompactContext.tsx

@@ -0,0 +1,13 @@
+"use client";
+
+import { createContext, useContext } from "react";
+
+export type ComposerCompactContextValue = {
+  setMultiline: (multiline: boolean) => void;
+};
+
+export const ComposerCompactContext =
+  createContext<ComposerCompactContextValue | null>(null);
+
+export const useComposerCompactContextOptional = () =>
+  useContext(ComposerCompactContext);

package/src/primitives/composer/ComposerInput.tsx

@@ -17,6 +17,7 @@ import {
 } from "react";
 import TextareaAutosize, {
   type TextareaAutosizeProps,
+  type TextareaHeightChangeMeta,
 } from "react-textarea-autosize";
 import { useEscapeKeydown } from "@radix-ui/react-use-escape-keydown";
 import { useOnScrollToBottom } from "../../utils/hooks/useOnScrollToBottom";
@@ -24,6 +25,7 @@ import { useMediaQuery } from "../../utils/hooks/useMediaQuery";
 import { useAui } from "@assistant-ui/store";
 import { flushTapSync } from "@assistant-ui/tap";
 import { useComposerInputPluginRegistryOptional } from "./ComposerInputPluginContext";
+import { useComposerCompactContextOptional } from "./ComposerCompactContext";
 import {
   useComposerInputDisabled,
   useComposerInputValue,
@@ -165,12 +167,14 @@ export const ComposerPrimitiveInput = forwardRef<
       unstable_focusOnThreadSwitched = true,
       unstable_insertNewlineOnTouchEnter = false,
       addAttachmentOnPaste = true,
+      onHeightChange,
       ...rest
     },
     forwardedRef,
   ) => {
     const aui = useAui();
     const pluginRegistry = useComposerInputPluginRegistryOptional();
+    const compactContext = useComposerCompactContextOptional();
 
     const declaredSubmitMode =
       submitMode ?? (submitOnEnter === false ? "none" : "enter");
@@ -278,6 +282,28 @@ export const ComposerPrimitiveInput = forwardRef<
       }
     };
 
+    const handleHeightChange = (
+      height: number,
+      meta: TextareaHeightChangeMeta,
+    ) => {
+      onHeightChange?.(height, meta);
+      if (!compactContext) return;
+      const el = textareaRef.current;
+      if (!el || el.value === "") return;
+      const cs = getComputedStyle(el);
+      const contentHeight =
+        cs.boxSizing === "border-box"
+          ? height -
+            parseFloat(cs.paddingTop) -
+            parseFloat(cs.paddingBottom) -
+            parseFloat(cs.borderTopWidth) -
+            parseFloat(cs.borderBottomWidth)
+          : height;
+      if (Math.round(contentHeight / meta.rowHeight) > 1) {
+        compactContext.setMultiline(true);
+      }
+    };
+
     const autoFocusEnabled = autoFocus && !isDisabled;
     const focus = useCallback(() => {
       const textarea = textareaRef.current;
@@ -318,6 +344,10 @@ export const ComposerPrimitiveInput = forwardRef<
       return aui.on("threadListItem.switchedTo", focus);
     }, [unstable_focusOnThreadSwitched, focus, aui]);
 
+    useEffect(() => {
+      if (value === "") compactContext?.setMultiline(false);
+    }, [value, compactContext]);
+
     const ariaComboboxProps = useTriggerPopoverAriaProps();
 
     const inputProps = {
@@ -391,6 +421,11 @@ export const ComposerPrimitiveInput = forwardRef<
         },
       ),
       onPaste: composeEventHandlers(onPaste, handlePaste),
+      ...(compactContext
+        ? { onHeightChange: handleHeightChange }
+        : onHeightChange !== undefined
+          ? { onHeightChange }
+          : {}),
     };
 
     if (render && isValidElement(render)) {

package/src/primitives/composer/ComposerRoot.test.tsx

@@ -0,0 +1,161 @@
+/**
+ * @vitest-environment jsdom
+ */
+import { act } from "react";
+import type { ReactNode } from "react";
+import { createRoot } from "react-dom/client";
+import type { Root } from "react-dom/client";
+import type * as AssistantStore from "@assistant-ui/store";
+import type * as ComposerSendModule from "./ComposerSend";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { useComposerCompactContextOptional } from "./ComposerCompactContext";
+import type { ComposerCompactContextValue } from "./ComposerCompactContext";
+import { ComposerPrimitiveRoot } from "./ComposerRoot";
+
+type StoreState = {
+  composer: {
+    attachments: object[];
+    quote: object | undefined;
+    queue: object[];
+    dictation: object | undefined;
+    text: string;
+  };
+};
+
+const { storeState } = vi.hoisted((): { storeState: StoreState } => ({
+  storeState: {
+    composer: {
+      attachments: [],
+      quote: undefined,
+      queue: [],
+      dictation: undefined,
+      text: "",
+    },
+  },
+}));
+
+(globalThis as Record<string, unknown>).IS_REACT_ACT_ENVIRONMENT = true;
+
+vi.mock("@assistant-ui/store", async (importOriginal) => {
+  const actual = await importOriginal<typeof AssistantStore>();
+  return {
+    ...actual,
+    useAuiState: <T,>(selector: (state: StoreState) => T) =>
+      selector(storeState),
+  };
+});
+
+vi.mock("./ComposerSend", async (importOriginal) => ({
+  ...(await importOriginal<typeof ComposerSendModule>()),
+  useComposerSend: () => vi.fn(),
+}));
+
+const resetStoreState = () => {
+  storeState.composer.attachments = [];
+  storeState.composer.quote = undefined;
+  storeState.composer.queue = [];
+  storeState.composer.dictation = undefined;
+  storeState.composer.text = "";
+};
+
+describe("ComposerPrimitiveRoot", () => {
+  let container: HTMLDivElement;
+  let root: Root;
+
+  beforeEach(() => {
+    resetStoreState();
+    container = document.createElement("div");
+    document.body.appendChild(container);
+    root = createRoot(container);
+  });
+
+  afterEach(async () => {
+    await act(async () => {
+      root.unmount();
+    });
+    container.remove();
+    vi.restoreAllMocks();
+  });
+
+  const mount = async (props: {
+    compact?: boolean | undefined;
+    children?: ReactNode;
+  }) => {
+    await act(async () => {
+      root.render(
+        <ComposerPrimitiveRoot data-testid="composer-root" {...props} />,
+      );
+    });
+    const form = container.querySelector("form");
+    expect(form).not.toBeNull();
+    return form as HTMLFormElement;
+  };
+
+  it("does not mark the form compact when compact is not enabled", async () => {
+    const form = await mount({});
+
+    expect(form.hasAttribute("data-compact")).toBe(false);
+  });
+
+  it("provides no compact context when compact is not enabled", async () => {
+    let compactContext: ComposerCompactContextValue | null = null;
+    const Probe = () => {
+      compactContext = useComposerCompactContextOptional();
+      return null;
+    };
+
+    await mount({ children: <Probe /> });
+
+    expect(compactContext).toBeNull();
+  });
+
+  it("starts compact on the first render when compact is enabled and composer state is pristine", async () => {
+    const form = await mount({ compact: true });
+
+    expect(form.hasAttribute("data-compact")).toBe(true);
+  });
+
+  it.each([
+    ["attachments are present", { attachments: [{}] }],
+    ["a quote is present", { quote: {} }],
+    ["queued messages are present", { queue: [{}] }],
+    ["dictation is active", { dictation: {} }],
+    ["text contains an explicit newline", { text: "a\nb" }],
+  ] as const)(
+    "does not mark the form compact when %s",
+    async (_name, composerPatch) => {
+      Object.assign(storeState.composer, composerPatch);
+
+      const form = await mount({ compact: true });
+
+      expect(form.hasAttribute("data-compact")).toBe(false);
+    },
+  );
+
+  it("updates compact mode when the compact context multiline latch changes", async () => {
+    let compactContext: ComposerCompactContextValue | null = null;
+    const Probe = () => {
+      compactContext = useComposerCompactContextOptional();
+      return null;
+    };
+
+    const form = await mount({
+      compact: true,
+      children: <Probe />,
+    });
+    const context = compactContext;
+    expect(context).not.toBeNull();
+    if (!context) throw new Error("Composer compact context was not provided");
+    expect(form.hasAttribute("data-compact")).toBe(true);
+
+    await act(async () => {
+      context.setMultiline(true);
+    });
+    expect(form.hasAttribute("data-compact")).toBe(false);
+
+    await act(async () => {
+      context.setMultiline(false);
+    });
+    expect(form.hasAttribute("data-compact")).toBe(true);
+  });
+});