@assistant-ui/react-native 0.1.45 → 0.1.47

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@assistant-ui/react-native",
-  "version": "0.1.45",
+  "version": "0.1.47",
   "description": "React Native bindings for assistant-ui",
   "keywords": [
     "assistant",
@@ -31,11 +31,11 @@
   ],
   "sideEffects": false,
   "dependencies": {
-    "@assistant-ui/core": "^0.3.23",
-    "@assistant-ui/store": "^0.3.17",
-    "@assistant-ui/tap": "^0.9.21",
-    "assistant-cloud": "^0.2.5",
-    "assistant-stream": "^0.3.47"
+    "@assistant-ui/core": "^0.3.25",
+    "@assistant-ui/store": "^0.3.18",
+    "@assistant-ui/tap": "^0.9.22",
+    "assistant-cloud": "^0.2.6",
+    "assistant-stream": "^0.3.49"
   },
   "peerDependencies": {
     "@types/react": "*",
@@ -53,7 +53,7 @@
     "@babel/core": "^7.29.7",
     "@types/react": "^19.3.0",
     "@types/react-dom": "^19.3.0",
-    "jsdom": "^30.0.1",
+    "jsdom": "^30.1.2",
     "react": "^19.3.0",
     "react-dom": "^19.3.0",
     "react-native": "^0.87.1",
@@ -76,6 +76,7 @@
   "scripts": {
     "build": "aui-build",
     "test": "vitest run",
+    "test:coverage": "vitest run --coverage --coverage.reporter=text --coverage.reporter=html --coverage.reporter=json-summary",
     "typecheck": "tsc --noEmit",
     "test:peer-react18": "vitest run --config vitest.peer-react18.config.ts",
     "test:types:peer-react18": "aui-react18-types",

package/src/index.ts

@@ -20,9 +20,13 @@ export type {
   ToolApprovalDisplay,
   ToolApprovalOption,
   ToolApprovalOptionKind,
+  ToolApprovalAnswer,
+  ToolApprovalQuestion,
+  ToolApprovalQuestionOption,
   ToolApprovalResponse,
   ToolCallMessagePart,
   ToolCallMessagePartStatus,
+  MessagePartTiming,
   ToolCallTiming,
   ToolModelContentPart,
   ImageMessagePart,
@@ -156,9 +160,13 @@ export {
   useExternalStoreRuntime,
   useExternalStoreSharedOptions,
   useExternalMessageConverter,
+  /** @deprecated Experimental since 2025-01-26. Not scheduled for removal; the API may change in any release. */
   convertExternalMessages as unstable_convertExternalMessages,
+  /** @deprecated Experimental since 2026-09-15. Not scheduled for removal; the API may change in any release. */
   createExternalMessageConversionCache as unstable_createExternalMessageConversionCache,
+  /** @deprecated Experimental since 2025-02-02. Not scheduled for removal; the API may change in any release. */
   createMessageConverter as unstable_createMessageConverter,
+  /** @deprecated Experimental since 2026-09-15. Not scheduled for removal; the API may change in any release. */
   type ExternalMessageConversionCache as Unstable_ExternalMessageConversionCache,
   type JoinStrategy,
 } from "@assistant-ui/core/react";
@@ -179,6 +187,11 @@ export * as SuggestionPrimitive from "./primitives/suggestion";
 export * as ErrorPrimitive from "./primitives/error";
 
 export { groupPartByType, type GroupByContext } from "@assistant-ui/core/react";
+export {
+  createThreadRowsSelector,
+  type ThreadRow,
+  type ThreadRowsOptions,
+} from "@assistant-ui/core/react";
 export { unstable_useThreadMessageIds } from "@assistant-ui/core/react";
 
 // Re-export shared providers from core/react
@@ -404,9 +417,17 @@ export type {
   ThreadSuggestion,
   ToolCallMessagePartMcpMetadata,
   ToolExecutionStatus,
+  DirectiveFormatter,
+  DirectiveSegment,
+  TriggerAdapter,
+  TriggerCategory,
+  TriggerItem,
   Unstable_DirectiveFormatter,
   Unstable_DirectiveSegment,
   Unstable_TriggerItem,
   VoiceSessionState,
 } from "@assistant-ui/core";
-export { unstable_defaultDirectiveFormatter } from "@assistant-ui/core";
+export {
+  defaultDirectiveFormatter,
+  unstable_defaultDirectiveFormatter,
+} from "@assistant-ui/core";

package/src/primitives/actionBar/ActionBar.test.tsx

@@ -1,5 +1,6 @@
 import { act, type ReactNode } from "react";
 import { createRoot, type Root } from "react-dom/client";
+import { Text } from "react-native";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import { ActionBarCopy } from "./ActionBarCopy";
 import { ActionBarEdit } from "./ActionBarEdit";
@@ -222,6 +223,50 @@ describe("ActionBar", () => {
     return container.querySelector('[data-testid="t"]') as HTMLElement;
   };
 
+  const assertRenderState = async <TState extends object>(
+    render: (children: (state: TState) => ReactNode) => ReactNode,
+    expectedState: TState,
+  ) => {
+    let renderState: unknown;
+    await mount(
+      render((state) => {
+        renderState = state;
+        return <Text>label</Text>;
+      }),
+    );
+
+    expect(renderState).toMatchObject(expectedState);
+  };
+
+  it("ActionBarCopy passes Pressable state alongside isCopied", async () => {
+    await assertRenderState(
+      (children) => <ActionBarCopy testID="t">{children}</ActionBarCopy>,
+      { pressed: false, disabled: false, isCopied: false },
+    );
+  });
+
+  it("ActionBarFeedbackPositive passes Pressable state alongside isSubmitted", async () => {
+    await assertRenderState(
+      (children) => (
+        <ActionBarFeedbackPositive testID="t">
+          {children}
+        </ActionBarFeedbackPositive>
+      ),
+      { pressed: false, disabled: false, isSubmitted: false },
+    );
+  });
+
+  it("ActionBarFeedbackNegative passes Pressable state alongside isSubmitted", async () => {
+    await assertRenderState(
+      (children) => (
+        <ActionBarFeedbackNegative testID="t">
+          {children}
+        </ActionBarFeedbackNegative>
+      ),
+      { pressed: false, disabled: false, isSubmitted: false },
+    );
+  });
+
   for (const actionBar of actionBars) {
     describe(actionBar.name, () => {
       it("passes the effective disabled state to render children", async () => {

package/src/primitives/actionBar/ActionBarCopy.tsx

@@ -1,5 +1,9 @@
 import type { ReactNode } from "react";
-import { Pressable, type PressableProps } from "react-native";
+import {
+  Pressable,
+  type PressableProps,
+  type PressableStateCallbackType,
+} from "react-native";
 import {
   useActionBarCopy,
   type UseActionBarCopyOptions,
@@ -9,7 +13,12 @@ export type ActionBarCopyProps = Omit<PressableProps, "onPress" | "children"> &
   UseActionBarCopyOptions & {
     children:
       | ReactNode
-      | ((props: { isCopied: boolean; disabled: boolean }) => ReactNode);
+      | ((
+          props: PressableStateCallbackType & {
+            isCopied: boolean;
+            disabled: boolean;
+          },
+        ) => ReactNode);
   };
 
 export const ActionBarCopy = ({
@@ -33,7 +42,7 @@ export const ActionBarCopy = ({
       {...pressableProps}
     >
       {typeof children === "function"
-        ? children({ isCopied, disabled: isDisabled })
+        ? (state) => children({ ...state, isCopied, disabled: isDisabled })
         : children}
     </Pressable>
   );

package/src/primitives/actionBar/ActionBarFeedbackNegative.tsx

@@ -1,5 +1,10 @@
 import type { ReactNode } from "react";
-import { Platform, Pressable, type PressableProps } from "react-native";
+import {
+  Platform,
+  Pressable,
+  type PressableProps,
+  type PressableStateCallbackType,
+} from "react-native";
 import { useActionBarFeedbackNegative } from "@assistant-ui/core/react";
 
 export type ActionBarFeedbackNegativeProps = Omit<
@@ -8,7 +13,12 @@ export type ActionBarFeedbackNegativeProps = Omit<
 > & {
   children:
     | ReactNode
-    | ((props: { isSubmitted: boolean; disabled: boolean }) => ReactNode);
+    | ((
+        props: PressableStateCallbackType & {
+          isSubmitted: boolean;
+          disabled: boolean;
+        },
+      ) => ReactNode);
 };
 
 export const ActionBarFeedbackNegative = ({
@@ -30,7 +40,7 @@ export const ActionBarFeedbackNegative = ({
       {...pressableProps}
     >
       {typeof children === "function"
-        ? children({ isSubmitted, disabled })
+        ? (state) => children({ ...state, isSubmitted, disabled })
         : children}
     </Pressable>
   );

package/src/primitives/actionBar/ActionBarFeedbackPositive.tsx

@@ -1,5 +1,10 @@
 import type { ReactNode } from "react";
-import { Platform, Pressable, type PressableProps } from "react-native";
+import {
+  Platform,
+  Pressable,
+  type PressableProps,
+  type PressableStateCallbackType,
+} from "react-native";
 import { useActionBarFeedbackPositive } from "@assistant-ui/core/react";
 
 export type ActionBarFeedbackPositiveProps = Omit<
@@ -8,7 +13,12 @@ export type ActionBarFeedbackPositiveProps = Omit<
 > & {
   children:
     | ReactNode
-    | ((props: { isSubmitted: boolean; disabled: boolean }) => ReactNode);
+    | ((
+        props: PressableStateCallbackType & {
+          isSubmitted: boolean;
+          disabled: boolean;
+        },
+      ) => ReactNode);
 };
 
 export const ActionBarFeedbackPositive = ({
@@ -30,7 +40,7 @@ export const ActionBarFeedbackPositive = ({
       {...pressableProps}
     >
       {typeof children === "function"
-        ? children({ isSubmitted, disabled })
+        ? (state) => children({ ...state, isSubmitted, disabled })
         : children}
     </Pressable>
   );

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

@@ -8,7 +8,12 @@ const h = vi.hoisted(() => ({
   sendSpy: vi.fn<() => void>(),
   flushTapSyncSpy: vi.fn(<T,>(fn: () => T) => fn()),
   composerState: { text: "" },
-  threadState: { isRunning: false, queue: false, voice: false },
+  threadState: {
+    isRunning: false,
+    queue: false,
+    voice: false,
+    isDisabled: false,
+  },
   platform: { os: "web" as "web" | "ios" | "android" },
 }));
 
@@ -28,12 +33,20 @@ vi.mock("@assistant-ui/store", () => {
   return {
     useAui: () => aui,
     useAuiState: <T,>(
-      selector: (s: { composer: typeof h.composerState }) => T,
-    ) => selector({ composer: h.composerState }),
+      selector: (s: {
+        composer: typeof h.composerState;
+        thread: { isDisabled: boolean };
+      }) => T,
+    ) =>
+      selector({
+        composer: h.composerState,
+        thread: { isDisabled: h.threadState.isDisabled },
+      }),
   };
 });
 
-vi.mock("@assistant-ui/tap", () => ({
+vi.mock("@assistant-ui/tap", async (importOriginal) => ({
+  ...(await importOriginal<typeof import("@assistant-ui/tap")>()),
   flushTapSync: h.flushTapSyncSpy,
 }));
 
@@ -111,6 +124,7 @@ describe("ComposerInput", () => {
     h.threadState.isRunning = false;
     h.threadState.queue = false;
     h.threadState.voice = false;
+    h.threadState.isDisabled = false;
     h.platform.os = "web";
 
     container = document.createElement("div");
@@ -421,4 +435,50 @@ describe("ComposerInput", () => {
       expect(onKeyPress).toHaveBeenCalledTimes(1);
     });
   });
+
+  describe("disabled thread", () => {
+    beforeEach(() => {
+      h.threadState.isDisabled = true;
+    });
+
+    it("makes the input non-editable", async () => {
+      const input = await mount();
+      expect(input.disabled || input.readOnly).toBe(true);
+    });
+
+    it("does not let editable props override the disabled thread", async () => {
+      const input = await mount({ editable: true, readOnly: false });
+      expect(input.readOnly).toBe(true);
+    });
+
+    it("ignores text changes", async () => {
+      const input = await mount();
+      await act(async () => fireInput(input, "hello"));
+      expect(h.setText).not.toHaveBeenCalled();
+    });
+
+    it("does not submit on Enter", async () => {
+      const input = await mount();
+      await act(async () => fireKeyDown(input, { key: "Enter" }));
+      expect(h.sendSpy).not.toHaveBeenCalled();
+    });
+
+    it("forwards caller key handlers while blocking submission", async () => {
+      const onKeyPress = vi.fn();
+      const input = await mount({ onKeyPress });
+
+      await act(async () => {
+        fireKeyDown(input, { key: "Escape" });
+        fireKeyDown(input, { key: "Enter" });
+      });
+
+      expect(onKeyPress).toHaveBeenCalledTimes(2);
+      expect(h.sendSpy).not.toHaveBeenCalled();
+    });
+  });
+
+  it("preserves a caller-provided non-editable setting", async () => {
+    const input = await mount({ editable: false });
+    expect(input.readOnly).toBe(true);
+  });
 });

package/src/primitives/composer/ComposerInput.tsx

@@ -1,5 +1,6 @@
 import { useCallback, useEffect, useRef } from "react";
 import { Platform, TextInput, type TextInputProps } from "react-native";
+import { composerInputDisabled } from "@assistant-ui/core/store/internal";
 import { useAui, useAuiState } from "@assistant-ui/store";
 import { flushTapSync } from "@assistant-ui/tap";
 
@@ -59,14 +60,19 @@ export const ComposerInput = ({
   onKeyPress: onKeyPressProp,
   numberOfLines,
   style,
+  editable,
+  readOnly,
   ...props
 }: ComposerInputProps) => {
   const aui = useAui();
   const text = useAuiState((s) => s.composer.text);
+  const isInputDisabled = useAuiState(composerInputDisabled);
   const inputRef = useRef<TextInputInstance>(null);
 
   const onChangeText = useCallback(
     (value: string) => {
+      if (isInputDisabled) return;
+
       if (Platform.OS === "web") {
         // Keep the controlled value in sync mid-IME so react-dom does not reset the textarea to a stale value
         flushTapSync(() => {
@@ -76,7 +82,7 @@ export const ComposerInput = ({
       }
       aui.composer.setText(value);
     },
-    [aui],
+    [aui, isInputDisabled],
   );
 
   // Auto-resize textarea on web when text changes
@@ -89,6 +95,7 @@ export const ComposerInput = ({
     (e: TextInputKeyPressEvent) => {
       onKeyPressProp?.(e);
       if (e.isDefaultPrevented()) return;
+      if (isInputDisabled) return;
 
       if (Platform.OS !== "web") return;
       if (submitMode !== "enter") return;
@@ -113,9 +120,11 @@ export const ComposerInput = ({
         aui.composer.send();
       }
     },
-    [aui, submitMode, onKeyPressProp],
+    [aui, isInputDisabled, submitMode, onKeyPressProp],
   );
 
+  const isReadOnly = isInputDisabled || editable === false || readOnly === true;
+
   return (
     <TextInput
       ref={inputRef}
@@ -123,6 +132,8 @@ export const ComposerInput = ({
       onChangeText={onChangeText}
       onKeyPress={onKeyPress}
       numberOfLines={numberOfLines ?? (Platform.OS === "web" ? 1 : undefined)}
+      editable={editable}
+      readOnly={isReadOnly}
       style={style}
       {...props}
     />

package/src/primitives/message/MessageContent.runtime.test.tsx

@@ -14,6 +14,41 @@ import { MessageContent } from "./MessageContent";
 (globalThis as Record<string, unknown>).IS_REACT_ACT_ENVIRONMENT = true;
 
 describe("MessageContent with a runtime", () => {
+  it("renders a default image after a text part", async () => {
+    const image = "data:image/png;base64,iVBORw0KGgo=";
+    const App = () => {
+      const runtime = useExternalStoreRuntime({
+        messages: [
+          {
+            role: "assistant",
+            content: [
+              { type: "text", text: "lead" },
+              { type: "image", image },
+            ],
+          },
+        ] satisfies ThreadMessageLike[],
+        convertMessage: (value) => value,
+        onNew: async () => {},
+      });
+      return (
+        <AssistantRuntimeProvider runtime={runtime}>
+          <MessageByIndexProvider index={0}>
+            <MessageContent />
+          </MessageByIndexProvider>
+        </AssistantRuntimeProvider>
+      );
+    };
+    const container = document.createElement("div");
+    const root = createRoot(container);
+    try {
+      await act(async () => root.render(<App />));
+      expect(container.textContent).toContain("lead");
+      expect(container.querySelector("img")?.getAttribute("src")).toBe(image);
+    } finally {
+      await act(async () => root.unmount());
+    }
+  });
+
   it.each(["tool-call", "data"] as const)(
     "renders derived status for registered %s UIs",
     async (type) => {

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

@@ -17,7 +17,10 @@ const h = vi.hoisted(() => ({
         return this.content;
       },
     },
-    tools: { toolUIs: {} as Record<string, unknown> },
+    tools: {
+      toolUIs: {} as Record<string, unknown>,
+      mcpApp: undefined as { render: unknown } | undefined,
+    },
     dataRenderers: {
       renderers: {} as Record<string, unknown>,
       fallbacks: [] as unknown[],
@@ -25,7 +28,8 @@ const h = vi.hoisted(() => ({
   },
 }));
 
-vi.mock("@assistant-ui/store", () => {
+vi.mock("@assistant-ui/store", async (importOriginal) => {
+  const actual = await importOriginal<typeof import("@assistant-ui/store")>();
   const message = Object.assign(() => message, {
     part: ({ index }: { index: number }) => ({
       addToolResult: (...args: unknown[]) => h.addToolResult(index, ...args),
@@ -38,6 +42,7 @@ vi.mock("@assistant-ui/store", () => {
   });
   const aui = { message };
   return {
+    ...actual,
     useAui: () => aui,
     useAuiState: <T,>(selector: (s: typeof h.state) => T) => selector(h.state),
   };
@@ -56,6 +61,7 @@ describe("MessageContent", () => {
     h.unstable_recordInteraction.mockReset();
     h.state.message.content = [];
     h.state.tools.toolUIs = {};
+    h.state.tools.mcpApp = undefined;
     h.state.dataRenderers.renderers = {};
     h.state.dataRenderers.fallbacks = [];
 
@@ -153,9 +159,8 @@ describe("MessageContent", () => {
     expect(container.textContent).toBe("");
   });
 
-  it("renders null for optional parts when no renderer is provided", async () => {
+  it("renders null for reasoning, source, and file without renderers", async () => {
     h.state.message.content = [
-      { type: "image", image: "x" },
       { type: "reasoning", text: "r" },
       { type: "source", sourceType: "url", id: "1", url: "u" },
       { type: "file", filename: "f" },
@@ -186,6 +191,7 @@ describe("MessageContent", () => {
     await mount({ renderImage, renderReasoning, renderSource, renderFile });
 
     expect(container.textContent).toBe("image-0reasoning-1source-2file-3");
+    expect(container.querySelector("img")).toBeNull();
     expect(renderImage).toHaveBeenCalledWith({
       part: h.state.message.content[0],
       index: 0,
@@ -262,6 +268,64 @@ describe("MessageContent", () => {
       });
     });
 
+    it("renders tools.mcpApp for a tool call with a ui:// resource", async () => {
+      const Mcp = vi.fn(() => <span data-testid="mcp">mcp</span>);
+      h.state.message.content = [
+        {
+          type: "tool-call",
+          toolName: "show_chart",
+          toolCallId: "c1",
+          mcp: { app: { resourceUri: "ui://chart" } },
+        },
+      ];
+      h.state.tools.mcpApp = { render: Mcp };
+      await mount();
+      expect(container.querySelector('[data-testid="mcp"]')?.textContent).toBe(
+        "mcp",
+      );
+    });
+
+    it("prefers a named tool UI over tools.mcpApp", async () => {
+      const NamedTool = vi.fn(() => <span data-testid="named">named</span>);
+      const Mcp = vi.fn(() => <span data-testid="mcp">mcp</span>);
+      h.state.message.content = [
+        {
+          type: "tool-call",
+          toolName: "show_chart",
+          toolCallId: "c1",
+          mcp: { app: { resourceUri: "ui://chart" } },
+        },
+      ];
+      h.state.tools.toolUIs = { show_chart: [{ render: NamedTool }] };
+      h.state.tools.mcpApp = { render: Mcp };
+      await mount();
+      expect(container.querySelector('[data-testid="named"]')).not.toBeNull();
+      expect(Mcp).not.toHaveBeenCalled();
+    });
+
+    it("does not use tools.mcpApp when the resource URI is not ui://", async () => {
+      const Mcp = vi.fn(() => <span data-testid="mcp">mcp</span>);
+      h.state.message.content = [
+        {
+          type: "tool-call",
+          toolName: "show_chart",
+          toolCallId: "c1",
+          mcp: { app: { resourceUri: "https://example.com/chart" } },
+        },
+      ];
+      h.state.tools.mcpApp = { render: Mcp };
+      const renderToolCall = vi.fn(({ part, index }): ReactElement => (
+        <span data-testid="fallback">
+          fallback:{String(part.toolName)}:{index}
+        </span>
+      ));
+      await mount({ renderToolCall });
+      expect(
+        container.querySelector('[data-testid="fallback"]'),
+      ).not.toBeNull();
+      expect(Mcp).not.toHaveBeenCalled();
+    });
+
     it("renders null when no renderer is registered and no fallback is given", async () => {
       h.state.message.content = [
         { type: "tool-call", toolName: "search", toolCallId: "c1" },

package/src/primitives/message/MessageContent.tsx

@@ -1,16 +1,21 @@
 import { type ReactElement, Fragment, useMemo } from "react";
 import { Text } from "react-native";
-import { getMessagePartKeys } from "@assistant-ui/core/internal";
 import type {
   ThreadUserMessagePart,
   ThreadAssistantMessagePart,
   MessagePartState,
 } from "@assistant-ui/core";
 import { useAui, useAuiState } from "@assistant-ui/store";
-import type {
-  ToolCallMessagePartProps,
-  DataMessagePartProps,
+import {
+  PartByIndexProvider,
+  type ToolCallMessagePartProps,
+  type DataMessagePartProps,
 } from "@assistant-ui/core/react";
+import { DefaultMessageImage } from "./MessageParts";
+import {
+  getMessagePartKeys,
+  resolveToolRender,
+} from "@assistant-ui/core/internal";
 
 type MessageContentPart = ThreadUserMessagePart | ThreadAssistantMessagePart;
 type MessageContentStatePart = MessagePartState;
@@ -69,9 +74,7 @@ const ToolUIDisplay = ({
   index: number;
 }) => {
   const aui = useAui();
-  const Render = useAuiState(
-    (s) => s.tools.toolUIs[part.toolName]?.[0]?.render,
-  );
+  const Render = useAuiState((s) => resolveToolRender(s.tools, part));
 
   const partMethods = useMemo(() => aui.message.part({ index }), [aui, index]);
 
@@ -153,9 +156,16 @@ export const MessageContent = ({
               </Fragment>
             );
           case "image":
-            if (!renderImage) return null;
             return (
-              <Fragment key={key}>{renderImage({ part, index })}</Fragment>
+              <Fragment key={key}>
+                {renderImage ? (
+                  renderImage({ part, index })
+                ) : (
+                  <PartByIndexProvider index={index}>
+                    <DefaultMessageImage />
+                  </PartByIndexProvider>
+                )}
+              </Fragment>
             );
           case "reasoning":
             if (!renderReasoning) return null;