@assistant-ui/react-native 0.1.41 → 0.1.43

package/src/primitives/branchPicker/BranchPickerPrevious.test.tsx

@@ -8,12 +8,17 @@ const h = vi.hoisted(() => ({
   state: { disabled: false },
 }));
 
-vi.mock("@assistant-ui/core/react", () => ({
-  useBranchPickerPrevious: () => ({
-    previous: h.previous,
-    disabled: h.state.disabled,
-  }),
-}));
+vi.mock("@assistant-ui/core/react", async (importOriginal) => {
+  const actual =
+    await importOriginal<typeof import("@assistant-ui/core/react")>();
+  return {
+    ...actual,
+    useBranchPickerPrevious: () => ({
+      previous: h.previous,
+      disabled: h.state.disabled,
+    }),
+  };
+});
 
 (globalThis as Record<string, unknown>).IS_REACT_ACT_ENVIRONMENT = true;
 
@@ -97,4 +102,45 @@ describe("BranchPickerPrevious", () => {
 
     expect(h.previous).toHaveBeenCalledTimes(1);
   });
+
+  it("passes the hook disabled state and an explicit override to render children", async () => {
+    h.state.disabled = true;
+    let hookState: unknown = null;
+
+    await act(async () => {
+      root.render(
+        <BranchPickerPrevious testID="t">
+          {(state) => {
+            hookState = state;
+            return state.disabled ? "disabled" : "enabled";
+          }}
+        </BranchPickerPrevious>,
+      );
+    });
+
+    expect(hookState).toMatchObject({ pressed: false, disabled: true });
+    expect(container.textContent).toBe("disabled");
+
+    let overrideState: unknown = null;
+
+    await act(async () => {
+      root.render(
+        <BranchPickerPrevious testID="t" disabled={false}>
+          {(state) => {
+            overrideState = state;
+            return state.disabled ? "disabled" : "enabled";
+          }}
+        </BranchPickerPrevious>,
+      );
+    });
+
+    expect(overrideState).toMatchObject({ pressed: false, disabled: false });
+    expect(container.textContent).toBe("enabled");
+  });
+
+  it("renders plain children", async () => {
+    const el = await mount();
+
+    expect(el.textContent).toBe("prev");
+  });
 });

package/src/primitives/branchPicker/BranchPickerPrevious.tsx

@@ -1,11 +1,20 @@
-import { Pressable, type PressableProps } from "react-native";
+import type { ReactNode } from "react";
+import {
+  Pressable,
+  type PressableProps,
+  type PressableStateCallbackType,
+} from "react-native";
 import { useBranchPickerPrevious } from "@assistant-ui/core/react";
 
 export type BranchPickerPreviousProps = Omit<
   PressableProps,
   "onPress" | "children"
 > & {
-  children: PressableProps["children"];
+  children:
+    | ReactNode
+    | ((
+        state: PressableStateCallbackType & { disabled: boolean },
+      ) => ReactNode);
 };
 
 export const BranchPickerPrevious = ({
@@ -14,15 +23,18 @@ export const BranchPickerPrevious = ({
   ...pressableProps
 }: BranchPickerPreviousProps) => {
   const { previous, disabled } = useBranchPickerPrevious();
+  const isDisabled = disabledProp ?? disabled;
 
   return (
     <Pressable
       onPress={previous}
-      disabled={disabledProp ?? disabled}
+      disabled={isDisabled}
       accessibilityRole="button"
       {...pressableProps}
     >
-      {children}
+      {typeof children === "function"
+        ? (state) => children({ ...state, disabled: isDisabled })
+        : children}
     </Pressable>
   );
 };

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

@@ -0,0 +1,91 @@
+import { act } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import type { ThreadMessageLike } from "@assistant-ui/core";
+import {
+  AssistantRuntimeProvider,
+  MessageByIndexProvider,
+  PartByIndexProvider,
+  useExternalStoreRuntime,
+} from "@assistant-ui/core/react";
+import { MessagePartPrimitiveImage } from "./MessagePartImage";
+
+vi.mock("react-native", async (importOriginal) => {
+  const actual = await importOriginal<typeof import("react-native")>();
+  const React = await import("react");
+
+  const ImageMock = React.forwardRef(function ImageMock(
+    props: { source?: { uri?: string }; testID?: string },
+    ref: React.Ref<HTMLImageElement>,
+  ) {
+    return React.createElement("img", {
+      ref,
+      src: props.source?.uri,
+      "data-testid": props.testID,
+    });
+  });
+
+  return { ...actual, Image: ImageMock };
+});
+
+(globalThis as Record<string, unknown>).IS_REACT_ACT_ENVIRONMENT = true;
+
+const messages: ThreadMessageLike[] = [
+  {
+    role: "assistant",
+    content: [
+      { type: "text", text: "Answer" },
+      { type: "image", image: "https://example.com/image.png" },
+    ],
+  },
+];
+
+const App = ({ partIndex }: { partIndex: number }) => {
+  const runtime = useExternalStoreRuntime({
+    messages,
+    convertMessage: (message) => message,
+    onNew: async () => {
+      throw new Error("This thread is read-only");
+    },
+  });
+
+  return (
+    <AssistantRuntimeProvider runtime={runtime}>
+      <MessageByIndexProvider index={0}>
+        <PartByIndexProvider index={partIndex}>
+          <MessagePartPrimitiveImage testID="image" />
+        </PartByIndexProvider>
+      </MessageByIndexProvider>
+    </AssistantRuntimeProvider>
+  );
+};
+
+describe("MessagePartPrimitiveImage", () => {
+  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();
+  });
+
+  const mount = async (partIndex: number) => {
+    await act(async () => root.render(<App partIndex={partIndex} />));
+    return container.querySelector<HTMLImageElement>('[data-testid="image"]');
+  };
+
+  it("renders the current image part URI", async () => {
+    const image = await mount(1);
+    expect(image?.getAttribute("src")).toBe("https://example.com/image.png");
+  });
+
+  it("renders nothing for a non-image part", async () => {
+    expect(await mount(0)).toBeNull();
+  });
+});

package/src/primitives/messagePart/MessagePartImage.tsx

@@ -0,0 +1,33 @@
+import {
+  type ComponentRef,
+  type ForwardRefExoticComponent,
+  forwardRef,
+  type RefAttributes,
+} from "react";
+import { Image, type ImageProps } from "react-native";
+import { useAuiState } from "@assistant-ui/store";
+
+export namespace MessagePartPrimitiveImage {
+  export type Element = ComponentRef<typeof Image>;
+  export type Props = Omit<ImageProps, "source">;
+}
+
+export const MessagePartPrimitiveImage: ForwardRefExoticComponent<
+  MessagePartPrimitiveImage.Props &
+    RefAttributes<MessagePartPrimitiveImage.Element>
+> = forwardRef<
+  MessagePartPrimitiveImage.Element,
+  MessagePartPrimitiveImage.Props
+>((props, forwardedRef) => {
+  const uri = useAuiState((s) => {
+    const part = s.part;
+    return part.type === "image" ? part.image : undefined;
+  });
+
+  if (uri === undefined) return null;
+  return <Image source={{ uri }} {...props} ref={forwardedRef} />;
+});
+
+MessagePartPrimitiveImage.displayName = "MessagePartPrimitive.Image";
+
+export type MessagePartImageProps = MessagePartPrimitiveImage.Props;

package/src/primitives/messagePart/MessagePartInProgress.ts

@@ -0,0 +1 @@
+export { MessagePartPrimitiveInProgress } from "@assistant-ui/core/react";

package/src/primitives/messagePart/MessagePartText.test.tsx

@@ -0,0 +1,80 @@
+import { act } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import { afterEach, beforeEach, describe, expect, it } from "vitest";
+import type { ThreadMessageLike } from "@assistant-ui/core";
+import {
+  AssistantRuntimeProvider,
+  MessageByIndexProvider,
+  PartByIndexProvider,
+  useExternalStoreRuntime,
+} from "@assistant-ui/core/react";
+import { MessagePartPrimitiveText } from "./MessagePartText";
+
+(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: "image", image: "https://example.com/image.png" },
+    ],
+  },
+];
+
+const App = ({ partIndex }: { partIndex: number }) => {
+  const runtime = useExternalStoreRuntime({
+    messages,
+    convertMessage: (message) => message,
+    onNew: async () => {
+      throw new Error("This thread is read-only");
+    },
+  });
+
+  return (
+    <AssistantRuntimeProvider runtime={runtime}>
+      <MessageByIndexProvider index={0}>
+        <PartByIndexProvider index={partIndex}>
+          <MessagePartPrimitiveText testID="text" />
+        </PartByIndexProvider>
+      </MessageByIndexProvider>
+    </AssistantRuntimeProvider>
+  );
+};
+
+describe("MessagePartPrimitiveText", () => {
+  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();
+  });
+
+  const mount = async (partIndex: number) => {
+    await act(async () => root.render(<App partIndex={partIndex} />));
+    return container.querySelector('[data-testid="text"]') as HTMLElement;
+  };
+
+  it("renders text from the current text part", async () => {
+    const text = await mount(0);
+    expect(text.textContent).toBe("Answer");
+  });
+
+  it("renders text from the current reasoning part", async () => {
+    const text = await mount(1);
+    expect(text.textContent).toBe("Thinking");
+  });
+
+  it("renders empty text for a non-text part", async () => {
+    const text = await mount(2);
+    expect(text.textContent).toBe("");
+  });
+});

package/src/primitives/messagePart/MessagePartText.tsx

@@ -0,0 +1,36 @@
+import {
+  type ComponentRef,
+  type ForwardRefExoticComponent,
+  forwardRef,
+  type RefAttributes,
+} from "react";
+import { Text, type TextProps } from "react-native";
+import { useAuiState } from "@assistant-ui/store";
+
+export namespace MessagePartPrimitiveText {
+  export type Element = ComponentRef<typeof Text>;
+  export type Props = Omit<TextProps, "children">;
+}
+
+export const MessagePartPrimitiveText: ForwardRefExoticComponent<
+  MessagePartPrimitiveText.Props &
+    RefAttributes<MessagePartPrimitiveText.Element>
+> = forwardRef<
+  MessagePartPrimitiveText.Element,
+  MessagePartPrimitiveText.Props
+>((props, forwardedRef) => {
+  const text = useAuiState((s) => {
+    const part = s.part;
+    return part.type === "text" || part.type === "reasoning" ? part.text : "";
+  });
+
+  return (
+    <Text {...props} ref={forwardedRef}>
+      {text}
+    </Text>
+  );
+});
+
+MessagePartPrimitiveText.displayName = "MessagePartPrimitive.Text";
+
+export type MessagePartTextProps = MessagePartPrimitiveText.Props;

package/src/primitives/messagePart.ts

@@ -0,0 +1,10 @@
+export {
+  MessagePartPrimitiveText as Text,
+  type MessagePartTextProps as TextProps,
+} from "./messagePart/MessagePartText";
+export {
+  MessagePartPrimitiveImage as Image,
+  type MessagePartImageProps as ImageProps,
+} from "./messagePart/MessagePartImage";
+export { MessagePartPrimitiveInProgress as InProgress } from "./messagePart/MessagePartInProgress";
+export { PartPrimitiveMessages as Messages } from "@assistant-ui/core/react";