@assistant-ui/react-native 0.1.45 → 0.1.47

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/message.test.tsx

@@ -0,0 +1,74 @@
+import { act, type ReactElement } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { Text } from "react-native";
+import * as MessagePrimitive from "./message";
+
+const h = vi.hoisted(() => ({
+  message: { metadata: { custom: {} } as { custom: Record<string, unknown> } },
+}));
+
+vi.mock("@assistant-ui/store", async (importOriginal) => {
+  const actual = await importOriginal<typeof import("@assistant-ui/store")>();
+  return {
+    ...actual,
+    useAuiState: <T,>(selector: (state: typeof h) => T) => selector(h),
+  };
+});
+
+(globalThis as Record<string, unknown>).IS_REACT_ACT_ENVIRONMENT = true;
+
+describe("MessagePrimitive.Quote", () => {
+  let container: HTMLDivElement;
+  let root: Root;
+
+  beforeEach(() => {
+    h.message = { metadata: { custom: {} } };
+    container = document.createElement("div");
+    document.body.appendChild(container);
+    root = createRoot(container);
+  });
+
+  afterEach(async () => {
+    await act(async () => {
+      root.unmount();
+    });
+    container.remove();
+  });
+
+  const render = async (element: ReactElement) => {
+    await act(async () => {
+      root.render(element);
+    });
+  };
+
+  it("renders nothing for a message without a quote", async () => {
+    await render(
+      <MessagePrimitive.Quote>
+        {({ text }) => <Text testID="quote">{text}</Text>}
+      </MessagePrimitive.Quote>,
+    );
+
+    expect(container.querySelector('[data-testid="quote"]')).toBeNull();
+  });
+
+  it("passes the quote text and source message id to its child", async () => {
+    h.message = {
+      metadata: { custom: { quote: { text: "quoted text", messageId: "m1" } } },
+    };
+
+    await render(
+      <MessagePrimitive.Quote>
+        {({ text, messageId }) => (
+          <Text testID="quote">
+            {messageId}: {text}
+          </Text>
+        )}
+      </MessagePrimitive.Quote>,
+    );
+
+    expect(container.querySelector('[data-testid="quote"]')?.textContent).toBe(
+      "m1: quoted text",
+    );
+  });
+});

package/src/primitives/message.ts

@@ -11,6 +11,7 @@ export {
   MessagePrimitivePartByIndex as PartByIndex,
 } from "./message/MessageParts";
 export { MessagePrimitiveGroupedParts as GroupedParts } from "@assistant-ui/core/react";
+export { MessagePrimitiveQuote as Quote } from "@assistant-ui/core/react";
 export {
   MessageIf as If,
   type MessageIfProps as IfProps,

package/src/primitives/thread/ThreadMessages.test.tsx

@@ -10,13 +10,18 @@ type Msg = { id: string; role: string };
 
 const h = vi.hoisted(() => ({
   state: {
-    thread: { messages: [] as Msg[] },
+    thread: {
+      messages: [] as Msg[],
+      hasEarlier: false,
+      isLoadingEarlier: false,
+    },
     message: { role: "user" as string, composer: { isEditing: false } },
   },
   itemState: { role: "user" } as { role: string; parts?: unknown[] },
   events: {} as Record<string, Set<() => void>>,
   flatListProps: null as Record<string, unknown> | null,
   scrollToOffset: vi.fn(),
+  loadEarlier: vi.fn(async () => {}),
 }));
 
 vi.mock("react-native", async (importOriginal) => {
@@ -79,7 +84,9 @@ vi.mock("react-native", async (importOriginal) => {
 vi.mock("@assistant-ui/store", async () => {
   const React = await import("react");
 
+  const aui = { thread: { loadEarlier: h.loadEarlier } };
   return {
+    useAui: () => aui,
     useAuiState: <T,>(selector: (s: typeof h.state) => T) => selector(h.state),
     useAuiEvent: (
       selector: string | { scope: string; event: string },
@@ -400,6 +407,26 @@ describe("ThreadMessages", () => {
   });
 
   describe("MessagesFlatList history", () => {
+    it("pages through the runtime when no history prop is given", async () => {
+      h.state.thread.hasEarlier = true;
+      try {
+        await mountFlatList({ components: messageComponents });
+        getFlatListProps().onStartReached?.({ distanceFromStart: 0 });
+        expect(h.loadEarlier).toHaveBeenCalledOnce();
+
+        h.state.thread.isLoadingEarlier = true;
+        await mountFlatList({ components: messageComponents });
+        expect(getFlatListProps().onStartReached).toBeUndefined();
+      } finally {
+        h.state.thread.hasEarlier = false;
+        h.state.thread.isLoadingEarlier = false;
+      }
+
+      await mountFlatList({ components: messageComponents });
+      expect(getFlatListProps().onStartReached).toBeUndefined();
+      expect(getFlatListProps().onStartReachedThreshold).toBeUndefined();
+    });
+
     it("wires loadMore only while history can load more", async () => {
       const loadMore = vi.fn();