@assistant-ui/react-native 0.1.44 → 0.1.46

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@assistant-ui/react-native",
-  "version": "0.1.44",
+  "version": "0.1.46",
   "description": "React Native bindings for assistant-ui",
   "keywords": [
     "assistant",
@@ -31,11 +31,11 @@
   ],
   "sideEffects": false,
   "dependencies": {
-    "@assistant-ui/core": "^0.3.21",
-    "@assistant-ui/store": "^0.3.15",
-    "@assistant-ui/tap": "^0.9.19",
-    "assistant-cloud": "^0.2.3",
-    "assistant-stream": "^0.3.45"
+    "@assistant-ui/core": "^0.3.24",
+    "@assistant-ui/store": "^0.3.17",
+    "@assistant-ui/tap": "^0.9.21",
+    "assistant-cloud": "^0.2.5",
+    "assistant-stream": "^0.3.48"
   },
   "peerDependencies": {
     "@types/react": "*",
@@ -48,7 +48,8 @@
     }
   },
   "devDependencies": {
-    "@assistant-ui/x-buildutils": "0.0.29",
+    "@assistant-ui/x-buildutils": "0.0.30",
+    "@assistant-ui/x-react18": "0.0.0",
     "@babel/core": "^7.29.7",
     "@types/react": "^19.3.0",
     "@types/react-dom": "^19.3.0",
@@ -56,8 +57,8 @@
     "react": "^19.3.0",
     "react-dom": "^19.3.0",
     "react-native": "^0.87.1",
-    "react-native-web": "^0.21.2",
-    "vitest": "^5.0.1"
+    "react-native-web": "^0.21.3",
+    "vitest": "^5.0.3"
   },
   "publishConfig": {
     "access": "public",
@@ -75,7 +76,10 @@
   "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",
     "test:watch": "vitest"
   }
 }

package/src/index.ts

@@ -20,9 +20,13 @@ export type {
   ToolApprovalDisplay,
   ToolApprovalOption,
   ToolApprovalOptionKind,
+  ToolApprovalAnswer,
+  ToolApprovalQuestion,
+  ToolApprovalQuestionOption,
   ToolApprovalResponse,
   ToolCallMessagePart,
   ToolCallMessagePartStatus,
+  MessagePartTiming,
   ToolCallTiming,
   ToolModelContentPart,
   ImageMessagePart,
@@ -179,6 +183,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 +413,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/message/MessageContent.test.tsx

@@ -1,4 +1,4 @@
-import { act, type ReactElement } from "react";
+import { act, useState, type ReactElement } from "react";
 import { createRoot, type Root } from "react-dom/client";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import { MessageContent } from "./MessageContent";
@@ -79,6 +79,51 @@ describe("MessageContent", () => {
     });
   };
 
+  it("keeps a text seed while streaming and resets it for a replacement id", async () => {
+    const SeededText = ({ text }: { text: string }) => {
+      const [seed] = useState(text);
+      return <span>{`${seed}:${text}`}</span>;
+    };
+    const renderText: NonNullable<
+      Parameters<typeof MessageContent>[0]["renderText"]
+    > = ({ part }) => <SeededText text={part.text} />;
+
+    h.state.message.content = [{ type: "text", id: "p1", text: "old" }];
+    await mount({ renderText });
+    h.state.message.content = [
+      { type: "text", id: "p1", text: "old streamed" },
+    ];
+    await mount({ renderText });
+    expect(container.textContent).toBe("old:old streamed");
+
+    h.state.message.content = [{ type: "text", id: "p2", text: "new" }];
+    await mount({ renderText });
+    expect(container.textContent).toBe("new:new");
+  });
+
+  it("keeps each seed with its id when identified parts swap", async () => {
+    const SeededText = ({ text }: { text: string }) => {
+      const [seed] = useState(text);
+      return <span>{`${seed}:${text}`}</span>;
+    };
+    const renderText: NonNullable<
+      Parameters<typeof MessageContent>[0]["renderText"]
+    > = ({ part }) => <SeededText text={part.text} />;
+    h.state.message.content = [
+      { type: "text", id: "p1", text: "first" },
+      { type: "text", id: "p2", text: "second" },
+    ];
+    await mount({ renderText });
+    h.state.message.content = [
+      { type: "text", id: "p2", text: "second updated" },
+      { type: "text", id: "p1", text: "first updated" },
+    ];
+    await mount({ renderText });
+    expect(
+      Array.from(container.querySelectorAll("span"), (el) => el.textContent),
+    ).toEqual(["second:second updated", "first:first updated"]);
+  });
+
   it("renders a text part through the default text renderer", async () => {
     h.state.message.content = [{ type: "text", text: "hello world" }];
     await mount();

package/src/primitives/message/MessageContent.tsx

@@ -1,5 +1,6 @@
 import { type ReactElement, Fragment, useMemo } from "react";
 import { Text } from "react-native";
+import { getMessagePartKeys } from "@assistant-ui/core/internal";
 import type {
   ThreadUserMessagePart,
   ThreadAssistantMessagePart,
@@ -124,11 +125,12 @@ export const MessageContent = ({
   renderData,
 }: MessageContentProps) => {
   const content = useAuiState((s) => s.message.parts);
+  const partKeys = getMessagePartKeys(content);
 
   return (
     <>
       {content.map((part, index) => {
-        const key = `${part.type}-${index}`;
+        const key = partKeys[index];
         switch (part.type) {
           case "text":
             return (

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();