@assistant-ui/react 0.14.26 → 0.14.27

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);
+  });
+});

package/src/primitives/composer/ComposerRoot.tsx

@@ -1,14 +1,18 @@
 "use client";
 
 import { composeEventHandlers } from "@radix-ui/primitive";
+import { useAuiState } from "@assistant-ui/store";
 import { Primitive } from "../../utils/Primitive";
 import {
   type ComponentRef,
   type FormEvent,
   forwardRef,
   type ComponentPropsWithoutRef,
+  useMemo,
+  useState,
 } from "react";
 import { useComposerSend } from "./ComposerSend";
+import { ComposerCompactContext } from "./ComposerCompactContext";
 
 export namespace ComposerPrimitiveRoot {
   export type Element = ComponentRef<typeof Primitive.form>;
@@ -16,7 +20,17 @@ export namespace ComposerPrimitiveRoot {
    * Props for the ComposerPrimitive.Root component.
    * Accepts all standard form element props.
    */
-  export type Props = ComponentPropsWithoutRef<typeof Primitive.form>;
+  export type Props = ComponentPropsWithoutRef<typeof Primitive.form> & {
+    /**
+     * Opt the composer into compact mode. While the input holds at most a single
+     * line of text and there are no attachments, quote, queued messages, or
+     * active dictation, the root renders a `data-compact` attribute so styles
+     * can collapse the composer into a single row. It expands automatically
+     * when any of those conditions stop holding.
+     * @default false
+     */
+    compact?: boolean | undefined;
+  };
 }
 
 /**
@@ -37,9 +51,22 @@ export namespace ComposerPrimitiveRoot {
 export const ComposerPrimitiveRoot = forwardRef<
   ComposerPrimitiveRoot.Element,
   ComposerPrimitiveRoot.Props
->(({ onSubmit, ...rest }, forwardedRef) => {
+>(({ onSubmit, compact, ...rest }, forwardedRef) => {
   const send = useComposerSend();
 
+  const [multiline, setMultiline] = useState(false);
+  const compactContext = useMemo(() => ({ setMultiline }), []);
+  const stateAllowsCompact = useAuiState((s) =>
+    compact
+      ? s.composer.attachments.length === 0 &&
+        s.composer.quote == null &&
+        s.composer.queue.length === 0 &&
+        s.composer.dictation == null &&
+        !s.composer.text.includes("\n")
+      : false,
+  );
+  const isCompact = stateAllowsCompact && !multiline;
+
   const handleSubmit = (e: FormEvent) => {
     e.preventDefault();
 
@@ -48,11 +75,14 @@ export const ComposerPrimitiveRoot = forwardRef<
   };
 
   return (
-    <Primitive.form
-      {...rest}
-      ref={forwardedRef}
-      onSubmit={composeEventHandlers(onSubmit, handleSubmit)}
-    />
+    <ComposerCompactContext.Provider value={compact ? compactContext : null}>
+      <Primitive.form
+        {...rest}
+        data-compact={isCompact ? "" : undefined}
+        ref={forwardedRef}
+        onSubmit={composeEventHandlers(onSubmit, handleSubmit)}
+      />
+    </ComposerCompactContext.Provider>
   );
 });
 

package/src/tests/LocalThreadRuntimeCore.test.ts

@@ -161,7 +161,10 @@ describe("LocalThreadRuntimeCore", () => {
     expect(assistant.status!.type).toBe("incomplete");
     if (assistant.status!.type === "incomplete") {
       expect(assistant.status!.reason).toBe("error");
-      expect(assistant.status!.error).toBe("Model unavailable");
+      expect(assistant.status!.error).toEqual({
+        code: "unknown",
+        message: "Model unavailable",
+      });
     }
   });