@assistant-ui/react-native 0.1.46 → 0.1.47

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;

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

@@ -1,7 +1,7 @@
 import { act } from "react";
 import { createRoot, type Root } from "react-dom/client";
 import { Text } from "react-native";
-import { afterEach, beforeEach, describe, expect, it } from "vitest";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import type { ThreadMessageLike } from "@assistant-ui/core";
 import {
   AssistantRuntimeProvider,
@@ -10,6 +10,23 @@ import {
 } from "@assistant-ui/core/react";
 import { MessagePrimitiveParts } from "./MessageParts";
 
+const h = vi.hoisted(() => ({
+  imageProps: null as Record<string, unknown> | null,
+}));
+
+vi.mock("react-native", async (importOriginal) => {
+  const actual = await importOriginal<typeof import("react-native")>();
+  const React = await import("react");
+  const ImageMock = (props: Record<string, unknown>) => {
+    h.imageProps = props;
+    return React.createElement(
+      actual.Image as unknown as React.ElementType,
+      props,
+    );
+  };
+  return { ...actual, Image: ImageMock };
+});
+
 (globalThis as Record<string, unknown>).IS_REACT_ACT_ENVIRONMENT = true;
 
 const messages: ThreadMessageLike[] = [
@@ -73,11 +90,33 @@ const App = (props: MessagePrimitiveParts.Props) => {
 
 const ChainOfThought = () => <Text>Thought group</Text>;
 
+const IMAGE = "data:image/png;base64,iVBORw0KGgo=";
+
+const ImageApp = (props: MessagePrimitiveParts.Props) => {
+  const runtime = useExternalStoreRuntime({
+    messages: [
+      { role: "assistant", content: [{ type: "image", image: IMAGE }] },
+    ] satisfies ThreadMessageLike[],
+    convertMessage: (message) => message,
+    onNew: async () => {
+      throw new Error("This thread is read-only");
+    },
+  });
+  return (
+    <AssistantRuntimeProvider runtime={runtime}>
+      <MessageByIndexProvider index={0}>
+        <MessagePrimitiveParts {...props} />
+      </MessageByIndexProvider>
+    </AssistantRuntimeProvider>
+  );
+};
+
 describe("MessagePrimitiveParts", () => {
   let container: HTMLDivElement;
   let root: Root;
 
   beforeEach(() => {
+    h.imageProps = null;
     container = document.createElement("div");
     document.body.appendChild(container);
     root = createRoot(container);
@@ -88,6 +127,34 @@ describe("MessagePrimitiveParts", () => {
     container.remove();
   });
 
+  it("renders an image part without a components override", async () => {
+    await act(async () => root.render(<ImageApp />));
+
+    const image = container.querySelector("img");
+    expect(image).not.toBeNull();
+    expect(image?.getAttribute("src")).toContain(IMAGE);
+    expect(h.imageProps?.source).toEqual({ uri: IMAGE });
+  });
+
+  it("gives the default image a sizing style, which native layout requires", async () => {
+    await act(async () => root.render(<ImageApp />));
+
+    expect(h.imageProps?.style).toEqual({ width: "100%", aspectRatio: 1 });
+    expect(h.imageProps?.resizeMode).toBe("contain");
+  });
+
+  it("lets a caller-supplied Image win over the default", async () => {
+    const CustomImage = () => <Text>custom image</Text>;
+
+    await act(async () =>
+      root.render(<ImageApp components={{ Image: CustomImage }} />),
+    );
+
+    expect(container.textContent).toBe("custom image");
+    expect(container.querySelector("img")).toBeNull();
+    expect(h.imageProps).toBeNull();
+  });
+
   it("renders generative UI and its fallback beside native text", async () => {
     await act(async () => root.render(<App components={components} />));
     expect(container.textContent).toBe(

package/src/primitives/message/MessageParts.tsx

@@ -6,10 +6,22 @@ import {
   MessagePrimitivePartByIndex as MessagePrimitivePartByIndexBase,
   messagePartsDefaultComponents,
 } from "@assistant-ui/core/react";
+import { MessagePartPrimitiveImage } from "../messagePart/MessagePartImage";
+
+// React Native derives no intrinsic size from a remote or data URI, so an
+// Image with no dimensions lays out at zero. The default fills the available
+// width and keeps the picture whole inside a square box; a consumer that knows
+// its own aspect ratio overrides `components.Image`.
+const DEFAULT_IMAGE_STYLE = { width: "100%", aspectRatio: 1 } as const;
+
+export const DefaultMessageImage = () => (
+  <MessagePartPrimitiveImage style={DEFAULT_IMAGE_STYLE} resizeMode="contain" />
+);
 
 const rnDefaultComponents = {
   ...messagePartsDefaultComponents,
   Text: ({ text }: { text: string }) => <Text>{text}</Text>,
+  Image: DefaultMessageImage,
 } satisfies MessagePrimitiveParts.Props["components"];
 
 export namespace MessagePrimitiveParts {
@@ -30,7 +42,11 @@ export const MessagePrimitiveParts: FC<MessagePrimitiveParts.Props> = (
 
   const { components, ...rest } = props;
   const merged = components
-    ? { ...components, Text: components.Text ?? rnDefaultComponents.Text }
+    ? {
+        ...components,
+        Text: components.Text ?? rnDefaultComponents.Text,
+        Image: components.Image ?? rnDefaultComponents.Image,
+      }
     : rnDefaultComponents;
 
   return <MessagePrimitivePartsBase components={merged as any} {...rest} />;

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

@@ -0,0 +1,164 @@
+import { act } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { Text, View } from "react-native";
+import type { ThreadListItemPrimitive } from "../../index";
+import { Title as ThreadListItemTitle } from "../threadListItem";
+
+const fallbackProps: ThreadListItemPrimitive.Title.Props = {
+  fallback: "New chat",
+};
+
+const h = vi.hoisted(() => {
+  const listeners = new Set<() => void>();
+  let state = { threadListItem: { title: undefined as string | undefined } };
+  return {
+    getState: () => state,
+    subscribe: (listener: () => void) => {
+      listeners.add(listener);
+      return () => listeners.delete(listener);
+    },
+    setTitle: (title: string | undefined) => {
+      state = { threadListItem: { title } };
+      listeners.forEach((listener) => listener());
+    },
+    textChildren: [] as unknown[],
+    textProps: null as Record<string, unknown> | null,
+  };
+});
+
+vi.mock("@assistant-ui/store", async (importOriginal) => {
+  const actual = await importOriginal<typeof import("@assistant-ui/store")>();
+  const { useSyncExternalStore } = await import("react");
+  return {
+    ...actual,
+    useAuiState: <T,>(selector: (s: ReturnType<typeof h.getState>) => T) =>
+      selector(useSyncExternalStore(h.subscribe, h.getState)),
+  };
+});
+
+vi.mock("react-native", async (importOriginal) => {
+  const actual = await importOriginal<typeof import("react-native")>();
+  const React = await import("react");
+  const TextMock = (props: Record<string, unknown>) => {
+    h.textChildren.push(props.children);
+    h.textProps = props;
+    return React.createElement(
+      actual.Text as unknown as React.ElementType,
+      props,
+    );
+  };
+  return { ...actual, Text: TextMock };
+});
+
+(globalThis as Record<string, unknown>).IS_REACT_ACT_ENVIRONMENT = true;
+
+describe("ThreadListItemTitle", () => {
+  let container: HTMLDivElement;
+  let root: Root;
+
+  beforeEach(() => {
+    h.setTitle(undefined);
+    h.textChildren = [];
+    h.textProps = null;
+    container = document.createElement("div");
+    document.body.appendChild(container);
+    root = createRoot(container);
+  });
+
+  afterEach(async () => {
+    await act(async () => {
+      root.unmount();
+    });
+    container.remove();
+  });
+
+  it("renders the title through react-native Text", async () => {
+    h.setTitle("My thread");
+
+    await act(async () => {
+      root.render(<ThreadListItemTitle />);
+    });
+
+    expect(h.textChildren).toEqual(["My thread"]);
+    expect(container.textContent).toBe("My thread");
+  });
+
+  it("forwards host Text props the public type exposes", async () => {
+    h.setTitle("My thread");
+
+    await act(async () => {
+      root.render(<ThreadListItemTitle numberOfLines={1} testID="title" />);
+    });
+
+    expect(h.textProps).toMatchObject({ numberOfLines: 1, testID: "title" });
+  });
+
+  it("renders a nested Text fallback the ReactNode contract permits", async () => {
+    await act(async () => {
+      root.render(
+        <ThreadListItemTitle fallback={<Text>Untitled chat</Text>} />,
+      );
+    });
+
+    expect(container.textContent).toBe("Untitled chat");
+  });
+
+  it("renders nothing without a title or fallback", async () => {
+    await act(async () => {
+      root.render(<ThreadListItemTitle numberOfLines={1} />);
+    });
+
+    expect(h.textChildren).toEqual([]);
+    expect(container.innerHTML).toBe("");
+  });
+
+  it("renders an element fallback outside Text", async () => {
+    await act(async () => {
+      root.render(
+        <ThreadListItemTitle fallback={<View testID="fallback-view" />} />,
+      );
+    });
+
+    expect(h.textChildren).toEqual([]);
+    expect(
+      container.querySelector('[data-testid="fallback-view"]'),
+    ).not.toBeNull();
+  });
+
+  it("renders the fallback through Text when there is no title", async () => {
+    await act(async () => {
+      root.render(<ThreadListItemTitle {...fallbackProps} />);
+    });
+
+    expect(h.textChildren).toEqual(["New chat"]);
+    expect(container.textContent).toBe("New chat");
+  });
+
+  it("renders an empty title with the fallback", async () => {
+    h.setTitle("");
+
+    await act(async () => {
+      root.render(<ThreadListItemTitle {...fallbackProps} />);
+    });
+
+    expect(container.textContent).toBe("New chat");
+  });
+
+  it("updates the title while mounted", async () => {
+    await act(async () => {
+      root.render(<ThreadListItemTitle {...fallbackProps} />);
+    });
+    expect(container.textContent).toBe("New chat");
+
+    await act(async () => {
+      h.setTitle("First title");
+    });
+    expect(container.textContent).toBe("First title");
+
+    await act(async () => {
+      h.setTitle("Updated title");
+    });
+    expect(container.textContent).toBe("Updated title");
+  });
+});

package/src/primitives/threadListItem/ThreadListItemTitle.tsx

@@ -0,0 +1,23 @@
+import type { ReactNode } from "react";
+import { Text, type TextProps } from "react-native";
+import { useAuiState } from "@assistant-ui/store";
+
+export type ThreadListItemTitleProps = Omit<TextProps, "children"> & {
+  fallback?: ReactNode;
+};
+
+export function ThreadListItemTitle({
+  fallback,
+  ...props
+}: ThreadListItemTitleProps) {
+  const title = useAuiState((s) => s.threadListItem.title);
+  const content = title || fallback;
+  if (typeof content === "string" || typeof content === "number") {
+    return <Text {...props}>{content}</Text>;
+  }
+  return <>{content}</>;
+}
+
+export namespace ThreadListItemTitle {
+  export type Props = ThreadListItemTitleProps;
+}

package/src/primitives/threadListItem.ts

@@ -2,7 +2,10 @@ export {
   ThreadListItemRoot as Root,
   type ThreadListItemRootProps as RootProps,
 } from "./threadListItem/ThreadListItemRoot";
-export { ThreadListItemPrimitiveTitle as Title } from "@assistant-ui/core/react";
+export {
+  ThreadListItemTitle as Title,
+  type ThreadListItemTitleProps as TitleProps,
+} from "./threadListItem/ThreadListItemTitle";
 export {
   ThreadListItemTrigger as Trigger,
   type ThreadListItemTriggerProps as TriggerProps,