@assistant-ui/react-native 0.1.40 → 0.1.42

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@assistant-ui/react-native",
-  "version": "0.1.40",
+  "version": "0.1.42",
   "description": "React Native bindings for assistant-ui",
   "keywords": [
     "assistant",
@@ -31,10 +31,11 @@
   ],
   "sideEffects": false,
   "dependencies": {
-    "@assistant-ui/core": "^0.3.17",
-    "@assistant-ui/store": "^0.3.12",
-    "@assistant-ui/tap": "^0.9.16",
-    "assistant-stream": "^0.3.41"
+    "@assistant-ui/core": "^0.3.19",
+    "@assistant-ui/store": "^0.3.13",
+    "@assistant-ui/tap": "^0.9.17",
+    "assistant-cloud": "^0.2.1",
+    "assistant-stream": "^0.3.43"
   },
   "peerDependencies": {
     "@types/react": "*",
@@ -47,16 +48,16 @@
     }
   },
   "devDependencies": {
-    "@assistant-ui/x-buildutils": "0.0.25",
+    "@assistant-ui/x-buildutils": "0.0.27",
     "@babel/core": "^7.29.7",
     "@types/react": "^19.2.18",
-    "@types/react-dom": "^19.2.5",
+    "@types/react-dom": "^19.2.7",
     "jsdom": "^30.0.1",
     "react": "^19.2.8",
     "react-dom": "^19.2.8",
     "react-native": "^0.87.1",
     "react-native-web": "^0.21.2",
-    "vitest": "^4.1.11"
+    "vitest": "^5.0.0"
   },
   "publishConfig": {
     "access": "public",

package/src/index.ts

@@ -94,6 +94,7 @@ export type {
   AttachmentState,
   ThreadListItemState,
   QueueItemState,
+  TaskState,
 } from "@assistant-ui/core/store";
 
 // Store hooks and components
@@ -127,6 +128,34 @@ export {
   type LocalRuntimeOptions,
 } from "./runtimes/useLocalRuntime";
 export { useRemoteThreadListRuntime } from "./runtimes/useRemoteThreadListRuntime";
+export {
+  getExternalStoreMessages,
+  bindExternalStoreMessage,
+  pickExternalStoreSharedOptions,
+  createMessageQueue,
+  MessageNotSentError,
+  isMessageNotSentError,
+  type ExternalStoreAdapter,
+  type ExternalStoreMessageConverter,
+  type ExternalStoreSharedOptions,
+  type ExternalStoreThreadListAdapter,
+  type ExternalStoreThreadData,
+  type ExternalStoreBranchChange,
+  type ExternalThreadQueueAdapter,
+  type ExternalThreadBranchAdapter,
+  type MessageQueueDriver,
+  type MessageQueueController,
+} from "@assistant-ui/core";
+export {
+  useExternalStoreRuntime,
+  useExternalStoreSharedOptions,
+  useExternalMessageConverter,
+  convertExternalMessages as unstable_convertExternalMessages,
+  createExternalMessageConversionCache as unstable_createExternalMessageConversionCache,
+  createMessageConverter as unstable_createMessageConverter,
+  type ExternalMessageConversionCache as Unstable_ExternalMessageConversionCache,
+  type JoinStrategy,
+} from "@assistant-ui/core/react";
 
 // Primitives
 export * as ThreadPrimitive from "./primitives/thread";

package/src/primitives/composer/ComposerAddAttachment.tsx

@@ -1,19 +1,14 @@
 import { Pressable, type PressableProps } from "react-native";
 import { useComposerAddAttachment } from "@assistant-ui/core/react";
 
-export type ComposerAddAttachmentProps = Omit<
-  PressableProps,
-  "onPress" | "children"
-> & {
+export type ComposerAddAttachmentProps = Omit<PressableProps, "children"> & {
   children: PressableProps["children"];
 };
 
 /**
- * A button that triggers the attachment adding flow.
+ * A button for adding attachments. It is disabled while the composer cannot accept attachments.
  *
- * Note: The actual file picker implementation is platform-specific.
- * This component calls `useComposerAddAttachment()` from `@assistant-ui/core/react`.
- * You must handle the file selection in your own component using the returned `addAttachment` callback.
+ * React Native has no file input, so the caller opens the platform picker (for example `expo-image-picker`) in `onPress` and passes the selection to `aui.composer.addAttachment`.
  */
 export const ComposerAddAttachment = ({
   children,

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

@@ -0,0 +1,81 @@
+import { act } from "react";
+import { createRoot } from "react-dom/client";
+import { describe, expect, it } from "vitest";
+import type { MessagePartState, ThreadMessageLike } from "@assistant-ui/core";
+import {
+  AssistantRuntimeProvider,
+  MessageByIndexProvider,
+  useAssistantDataUI,
+  useAssistantToolUI,
+  useExternalStoreRuntime,
+} from "@assistant-ui/core/react";
+import { MessageContent } from "./MessageContent";
+
+(globalThis as Record<string, unknown>).IS_REACT_ACT_ENVIRONMENT = true;
+
+describe("MessageContent with a runtime", () => {
+  it.each(["tool-call", "data"] as const)(
+    "renders derived status for registered %s UIs",
+    async (type) => {
+      const Status = ({ status }: Pick<MessagePartState, "status">) => (
+        <span>{status.type}</span>
+      );
+      const Registrations = () => {
+        useAssistantToolUI({ toolName: "search", render: Status });
+        useAssistantDataUI({ name: "chart", render: Status });
+        return <MessageContent />;
+      };
+      const App = ({ message }: { message: ThreadMessageLike }) => {
+        const runtime = useExternalStoreRuntime({
+          messages: [message],
+          convertMessage: (value) => value,
+          onNew: async () => {},
+        });
+        return (
+          <AssistantRuntimeProvider runtime={runtime}>
+            <MessageByIndexProvider index={0}>
+              <Registrations />
+            </MessageByIndexProvider>
+          </AssistantRuntimeProvider>
+        );
+      };
+      const container = document.createElement("div");
+      const root = createRoot(container);
+      try {
+        for (const status of [
+          "running",
+          "requires-action",
+          "complete",
+        ] as const) {
+          if (type === "data" && status === "requires-action") continue;
+          const message: ThreadMessageLike = {
+            id: "m1",
+            role: "assistant",
+            status:
+              status === "running"
+                ? { type: status }
+                : status === "complete"
+                  ? { type: status, reason: "stop" }
+                  : { type: status, reason: "tool-calls" },
+            content: [
+              type === "data"
+                ? { type, name: "chart", data: { value: 1 } }
+                : {
+                    type,
+                    toolName: "search",
+                    toolCallId: "c1",
+                    args: {},
+                    argsText: "{}",
+                    ...(status === "complete" ? { result: "done" } : {}),
+                  },
+            ],
+          };
+          await act(async () => root.render(<App message={message} />));
+          expect(container.textContent).toBe(status);
+        }
+      } finally {
+        await act(async () => root.unmount());
+      }
+    },
+  );
+});

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

@@ -10,7 +10,12 @@ const h = vi.hoisted(() => ({
   resumeToolCall: vi.fn(),
   respondToToolApproval: vi.fn(),
   state: {
-    message: { content: [] as AnyPart[] },
+    message: {
+      content: [] as AnyPart[],
+      get parts() {
+        return this.content;
+      },
+    },
     tools: { toolUIs: {} as Record<string, unknown> },
     dataRenderers: { renderers: {} as Record<string, unknown> },
   },

package/src/primitives/message/MessageContent.tsx

@@ -3,8 +3,7 @@ import { Text } from "react-native";
 import type {
   ThreadUserMessagePart,
   ThreadAssistantMessagePart,
-  ToolCallMessagePart,
-  DataMessagePart,
+  MessagePartState,
 } from "@assistant-ui/core";
 import { useAui, useAuiState } from "@assistant-ui/store";
 import type {
@@ -13,6 +12,7 @@ import type {
 } from "@assistant-ui/core/react";
 
 type MessageContentPart = ThreadUserMessagePart | ThreadAssistantMessagePart;
+type MessageContentStatePart = MessagePartState;
 
 export type MessageContentProps = {
   renderText?: (props: {
@@ -59,9 +59,12 @@ const ToolUIDisplay = ({
   index,
 }: {
   Fallback:
-    | ((props: { part: ToolCallMessagePart; index: number }) => ReactElement)
+    | ((props: {
+        part: Extract<MessageContentPart, { type: "tool-call" }>;
+        index: number;
+      }) => ReactElement)
     | undefined;
-  part: ToolCallMessagePart;
+  part: Extract<MessageContentStatePart, { type: "tool-call" }>;
   index: number;
 }) => {
   const aui = useAui();
@@ -91,9 +94,12 @@ const DataUIDisplay = ({
   index,
 }: {
   Fallback:
-    | ((props: { part: DataMessagePart; index: number }) => ReactElement)
+    | ((props: {
+        part: Extract<MessageContentPart, { type: "data" }>;
+        index: number;
+      }) => ReactElement)
     | undefined;
-  part: DataMessagePart;
+  part: Extract<MessageContentStatePart, { type: "data" }>;
   index: number;
 }) => {
   const Render = useAuiState((s) => {
@@ -115,7 +121,7 @@ export const MessageContent = ({
   renderFile,
   renderData,
 }: MessageContentProps) => {
-  const content = useAuiState((s) => s.message.content);
+  const content = useAuiState((s) => s.message.parts);
 
   return (
     <>

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

@@ -0,0 +1,116 @@
+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 type { ThreadMessageLike } from "@assistant-ui/core";
+import {
+  AssistantRuntimeProvider,
+  MessageByIndexProvider,
+  useExternalStoreRuntime,
+} from "@assistant-ui/core/react";
+import { MessagePrimitiveParts } from "./MessageParts";
+
+(globalThis as Record<string, unknown>).IS_REACT_ACT_ENVIRONMENT = true;
+
+const messages: ThreadMessageLike[] = [
+  {
+    role: "assistant",
+    content: [
+      { type: "text", text: "Answer" },
+      { type: "reasoning", text: "Thinking" },
+      {
+        type: "generative-ui",
+        spec: {
+          root: [
+            { component: "Card", props: { title: "Result" } },
+            { component: "Unknown" },
+          ],
+        },
+      },
+      { type: "data", name: "chart", data: 42 },
+      { type: "data", name: "other", data: 7 },
+    ],
+  },
+];
+
+const components = {
+  generativeUI: {
+    components: {
+      Card: ({ title }: { title: string }) => <Text>{title}</Text>,
+    },
+    Fallback: ({ component }: { component: string }) => (
+      <Text>Unavailable: {component}</Text>
+    ),
+  },
+  data: {
+    by_name: {
+      chart: ({ data }: { data: unknown }) => (
+        <Text>Chart: {String(data)}</Text>
+      ),
+    },
+    Fallback: ({ data }: { data: unknown }) => (
+      <Text>Data: {String(data)}</Text>
+    ),
+  },
+};
+
+const App = (props: MessagePrimitiveParts.Props) => {
+  const runtime = useExternalStoreRuntime({
+    messages,
+    convertMessage: (message) => message,
+    onNew: async () => {
+      throw new Error("This thread is read-only");
+    },
+  });
+  return (
+    <AssistantRuntimeProvider runtime={runtime}>
+      <MessageByIndexProvider index={0}>
+        <MessagePrimitiveParts {...props} />
+      </MessageByIndexProvider>
+    </AssistantRuntimeProvider>
+  );
+};
+
+const ChainOfThought = () => <Text>Thought group</Text>;
+
+describe("MessagePrimitiveParts", () => {
+  let container: HTMLDivElement;
+  let root: Root;
+
+  beforeEach(() => {
+    container = document.createElement("div");
+    document.body.appendChild(container);
+    root = createRoot(container);
+  });
+
+  afterEach(async () => {
+    await act(async () => root.unmount());
+    container.remove();
+  });
+
+  it("renders generative UI and its fallback beside native text", async () => {
+    await act(async () => root.render(<App components={components} />));
+    expect(container.textContent).toBe(
+      "AnswerResultUnavailable: UnknownChart: 42Data: 7",
+    );
+  });
+
+  it("keeps data and generative UI when chain-of-thought grouping changes", async () => {
+    await act(async () => root.render(<App components={components} />));
+    expect(container.textContent).toBe(
+      "AnswerResultUnavailable: UnknownChart: 42Data: 7",
+    );
+
+    await act(async () =>
+      root.render(<App components={{ ...components, ChainOfThought }} />),
+    );
+    expect(container.textContent).toBe(
+      "AnswerThought groupResultUnavailable: UnknownChart: 42Data: 7",
+    );
+
+    await act(async () => root.render(<App components={components} />));
+    expect(container.textContent).toBe(
+      "AnswerResultUnavailable: UnknownChart: 42Data: 7",
+    );
+  });
+});

package/src/primitives/message/MessageParts.tsx

@@ -30,30 +30,7 @@ export const MessagePrimitiveParts: FC<MessagePrimitiveParts.Props> = (
 
   const { components, ...rest } = props;
   const merged = components
-    ? {
-        Text: components.Text ?? rnDefaultComponents.Text,
-        Image: components.Image ?? messagePartsDefaultComponents.Image,
-        Reasoning:
-          components.Reasoning ?? messagePartsDefaultComponents.Reasoning,
-        Source: components.Source ?? messagePartsDefaultComponents.Source,
-        File: components.File ?? messagePartsDefaultComponents.File,
-        Unstable_Audio:
-          components.Unstable_Audio ??
-          messagePartsDefaultComponents.Unstable_Audio,
-        ...("ChainOfThought" in components
-          ? { ChainOfThought: components.ChainOfThought }
-          : {
-              tools: components.tools,
-              data: components.data,
-              ToolGroup:
-                components.ToolGroup ?? messagePartsDefaultComponents.ToolGroup,
-              ReasoningGroup:
-                components.ReasoningGroup ??
-                messagePartsDefaultComponents.ReasoningGroup,
-            }),
-        Empty: components.Empty,
-        Quote: components.Quote,
-      }
+    ? { ...components, Text: components.Text ?? rnDefaultComponents.Text }
     : rnDefaultComponents;
 
   return <MessagePrimitivePartsBase components={merged as any} {...rest} />;