@assistant-ui/react-native 0.1.42 → 0.1.44

package/src/primitives/actionBar/ActionBarStopSpeaking.tsx

@@ -0,0 +1,42 @@
+import type { ReactNode } from "react";
+import {
+  Pressable,
+  type PressableProps,
+  type PressableStateCallbackType,
+} from "react-native";
+import { useActionBarStopSpeaking } from "@assistant-ui/core/react";
+
+export type ActionBarStopSpeakingProps = Omit<
+  PressableProps,
+  "children" | "onPress"
+> & {
+  children:
+    | ReactNode
+    | ((
+        state: PressableStateCallbackType & { disabled: boolean },
+      ) => ReactNode);
+};
+
+export const ActionBarStopSpeaking = ({
+  children,
+  disabled: disabledProp,
+  ...pressableProps
+}: ActionBarStopSpeakingProps) => {
+  const { stopSpeaking, disabled } = useActionBarStopSpeaking();
+  const isDisabled = disabledProp ?? disabled;
+
+  return (
+    <Pressable
+      onPress={() => stopSpeaking()}
+      disabled={isDisabled}
+      accessibilityRole="button"
+      {...pressableProps}
+    >
+      {typeof children === "function"
+        ? (state) => children({ ...state, disabled: isDisabled })
+        : children}
+    </Pressable>
+  );
+};
+
+ActionBarStopSpeaking.displayName = "ActionBarPrimitive.StopSpeaking";

package/src/primitives/actionBar.ts

@@ -10,6 +10,14 @@ export {
   ActionBarReload as Reload,
   type ActionBarReloadProps as ReloadProps,
 } from "./actionBar/ActionBarReload";
+export {
+  ActionBarSpeak as Speak,
+  type ActionBarSpeakProps as SpeakProps,
+} from "./actionBar/ActionBarSpeak";
+export {
+  ActionBarStopSpeaking as StopSpeaking,
+  type ActionBarStopSpeakingProps as StopSpeakingProps,
+} from "./actionBar/ActionBarStopSpeaking";
 export {
   ActionBarFeedbackPositive as FeedbackPositive,
   type ActionBarFeedbackPositiveProps as FeedbackPositiveProps,

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

@@ -8,9 +8,17 @@ const h = vi.hoisted(() => ({
   state: { disabled: false },
 }));
 
-vi.mock("@assistant-ui/core/react", () => ({
-  useBranchPickerNext: () => ({ next: h.next, disabled: h.state.disabled }),
-}));
+vi.mock("@assistant-ui/core/react", async (importOriginal) => {
+  const actual =
+    await importOriginal<typeof import("@assistant-ui/core/react")>();
+  return {
+    ...actual,
+    useBranchPickerNext: () => ({
+      next: h.next,
+      disabled: h.state.disabled,
+    }),
+  };
+});
 
 (globalThis as Record<string, unknown>).IS_REACT_ACT_ENVIRONMENT = true;
 
@@ -94,4 +102,45 @@ describe("BranchPickerNext", () => {
 
     expect(h.next).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(
+        <BranchPickerNext testID="t">
+          {(state) => {
+            hookState = state;
+            return state.disabled ? "disabled" : "enabled";
+          }}
+        </BranchPickerNext>,
+      );
+    });
+
+    expect(hookState).toMatchObject({ pressed: false, disabled: true });
+    expect(container.textContent).toBe("disabled");
+
+    let overrideState: unknown = null;
+
+    await act(async () => {
+      root.render(
+        <BranchPickerNext testID="t" disabled={false}>
+          {(state) => {
+            overrideState = state;
+            return state.disabled ? "disabled" : "enabled";
+          }}
+        </BranchPickerNext>,
+      );
+    });
+
+    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("next");
+  });
 });

package/src/primitives/branchPicker/BranchPickerNext.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 { useBranchPickerNext } from "@assistant-ui/core/react";
 
 export type BranchPickerNextProps = Omit<
   PressableProps,
   "onPress" | "children"
 > & {
-  children: PressableProps["children"];
+  children:
+    | ReactNode
+    | ((
+        state: PressableStateCallbackType & { disabled: boolean },
+      ) => ReactNode);
 };
 
 export const BranchPickerNext = ({
@@ -14,15 +23,18 @@ export const BranchPickerNext = ({
   ...pressableProps
 }: BranchPickerNextProps) => {
   const { next, disabled } = useBranchPickerNext();
+  const isDisabled = disabledProp ?? disabled;
 
   return (
     <Pressable
       onPress={next}
-      disabled={disabledProp ?? disabled}
+      disabled={isDisabled}
       accessibilityRole="button"
       {...pressableProps}
     >
-      {children}
+      {typeof children === "function"
+        ? (state) => children({ ...state, disabled: isDisabled })
+        : children}
     </Pressable>
   );
 };

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

@@ -8,7 +8,7 @@ const h = vi.hoisted(() => ({
   sendSpy: vi.fn<() => void>(),
   flushTapSyncSpy: vi.fn(<T,>(fn: () => T) => fn()),
   composerState: { text: "" },
-  threadState: { isRunning: false, queue: false },
+  threadState: { isRunning: false, queue: false, voice: false },
   platform: { os: "web" as "web" | "ios" | "android" },
 }));
 
@@ -21,6 +21,7 @@ vi.mock("@assistant-ui/store", () => {
     getState: () => ({
       isRunning: h.threadState.isRunning,
       capabilities: { queue: h.threadState.queue },
+      voice: h.threadState.voice ? { status: { type: "running" } } : undefined,
     }),
   };
   const aui = { composer, thread };
@@ -109,6 +110,7 @@ describe("ComposerInput", () => {
     h.composerState.text = "";
     h.threadState.isRunning = false;
     h.threadState.queue = false;
+    h.threadState.voice = false;
     h.platform.os = "web";
 
     container = document.createElement("div");
@@ -203,6 +205,20 @@ describe("ComposerInput", () => {
       expect(h.sendSpy).toHaveBeenCalledTimes(1);
     });
 
+    it("submits while a spoken reply runs during a voice session", async () => {
+      h.threadState.isRunning = true;
+      h.threadState.voice = true;
+      const input = await mount();
+
+      let event!: KeyboardEvent;
+      await act(async () => {
+        event = fireKeyDown(input, { key: "Enter" });
+      });
+
+      expect(h.sendSpy).toHaveBeenCalledTimes(1);
+      expect(event.defaultPrevented).toBe(true);
+    });
+
     it("blocks submission when the thread starts running after mount", async () => {
       const input = await mount();
 

package/src/primitives/composer/ComposerInput.tsx

@@ -103,7 +103,12 @@ export const ComposerInput = ({
       if (nativeEvent.isComposing || nativeEvent.keyCode === 229) return;
       if (nativeEvent.key === "Enter" && !nativeEvent.shiftKey) {
         const threadState = aui.thread.getState();
-        if (threadState.isRunning && !threadState.capabilities.queue) return;
+        if (
+          threadState.isRunning &&
+          !threadState.capabilities.queue &&
+          threadState.voice === undefined
+        )
+          return;
         (e as unknown as Event).preventDefault?.();
         aui.composer.send();
       }

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

@@ -9,6 +9,7 @@ const h = vi.hoisted(() => ({
   addToolResult: vi.fn(),
   resumeToolCall: vi.fn(),
   respondToToolApproval: vi.fn(),
+  unstable_recordInteraction: vi.fn(),
   state: {
     message: {
       content: [] as AnyPart[],
@@ -17,7 +18,10 @@ const h = vi.hoisted(() => ({
       },
     },
     tools: { toolUIs: {} as Record<string, unknown> },
-    dataRenderers: { renderers: {} as Record<string, unknown> },
+    dataRenderers: {
+      renderers: {} as Record<string, unknown>,
+      fallbacks: [] as unknown[],
+    },
   },
 }));
 
@@ -28,6 +32,8 @@ vi.mock("@assistant-ui/store", () => {
       resumeToolCall: (...args: unknown[]) => h.resumeToolCall(index, ...args),
       respondToToolApproval: (...args: unknown[]) =>
         h.respondToToolApproval(index, ...args),
+      unstable_recordInteraction: (...args: unknown[]) =>
+        h.unstable_recordInteraction(index, ...args),
     }),
   });
   const aui = { message };
@@ -47,9 +53,11 @@ describe("MessageContent", () => {
     h.addToolResult.mockReset();
     h.resumeToolCall.mockReset();
     h.respondToToolApproval.mockReset();
+    h.unstable_recordInteraction.mockReset();
     h.state.message.content = [];
     h.state.tools.toolUIs = {};
     h.state.dataRenderers.renderers = {};
+    h.state.dataRenderers.fallbacks = [];
 
     container = document.createElement("div");
     document.body.appendChild(container);
@@ -152,6 +160,10 @@ describe("MessageContent", () => {
         (props.addResult as () => void)();
         (props.resume as () => void)();
         (props.respondToApproval as () => void)();
+        (props.unstable_recordInteraction as (input: unknown) => void)({
+          type: "action",
+          payload: { choice: "retry" },
+        });
         return <span data-testid="tool">tool:{String(props.toolName)}</span>;
       });
       h.state.tools.toolUIs = { search: [{ render: ToolRender }] };
@@ -163,6 +175,10 @@ describe("MessageContent", () => {
       expect(h.addToolResult).toHaveBeenCalledWith(0);
       expect(h.resumeToolCall).toHaveBeenCalledWith(0);
       expect(h.respondToToolApproval).toHaveBeenCalledWith(0);
+      expect(h.unstable_recordInteraction).toHaveBeenCalledWith(0, {
+        type: "action",
+        payload: { choice: "retry" },
+      });
     });
 
     it("picks the first registration when multiple are registered", async () => {
@@ -218,7 +234,7 @@ describe("MessageContent", () => {
       const DataRender = vi.fn((props: Record<string, unknown>) => (
         <span data-testid="data">data:{String(props.name)}</span>
       ));
-      h.state.dataRenderers.renderers = { chart: DataRender };
+      h.state.dataRenderers.renderers = { chart: [DataRender] };
 
       await mount();
 
@@ -251,6 +267,51 @@ describe("MessageContent", () => {
       expect(el?.textContent).toBe("fallback:chart:0");
     });
 
+    it("uses dataRenderers.fallbacks[0] before renderData when no named renderer matches", async () => {
+      h.state.message.content = [{ type: "data", name: "chart", data: {} }];
+      const DataFallback = vi.fn((props: Record<string, unknown>) => (
+        <span data-testid="gfallback">global:{String(props.name)}</span>
+      ));
+      h.state.dataRenderers.fallbacks = [DataFallback];
+      const renderData = vi.fn(({ part, index }): ReactElement => (
+        <span data-testid="dfallback">
+          fallback:{String(part.name)}:{index}
+        </span>
+      ));
+      await mount({ renderData });
+
+      expect(
+        container.querySelector('[data-testid="gfallback"]')?.textContent,
+      ).toBe("global:chart");
+      expect(DataFallback.mock.calls[0]?.[0]).toEqual({
+        type: "data",
+        name: "chart",
+        data: {},
+      });
+      expect(renderData).not.toHaveBeenCalled();
+    });
+
+    it("prefers a named data renderer over dataRenderers.fallbacks", async () => {
+      h.state.message.content = [{ type: "data", name: "chart", data: {} }];
+      const DataRender = vi.fn((props: Record<string, unknown>) => (
+        <span data-testid="data">data:{String(props.name)}</span>
+      ));
+      const DataFallback = vi.fn(() => (
+        <span data-testid="gfallback">global-fallback</span>
+      ));
+      h.state.dataRenderers.renderers = { chart: [DataRender] };
+      h.state.dataRenderers.fallbacks = [DataFallback];
+      await mount({
+        renderData: () => <span data-testid="dfallback">render prop</span>,
+      });
+
+      expect(container.querySelector('[data-testid="data"]')?.textContent).toBe(
+        "data:chart",
+      );
+      expect(DataFallback).not.toHaveBeenCalled();
+      expect(container.querySelector('[data-testid="dfallback"]')).toBeNull();
+    });
+
     it("renders null when no data renderer is registered and no fallback is given", async () => {
       h.state.message.content = [{ type: "data", name: "chart", data: {} }];
       await mount();
@@ -268,7 +329,7 @@ describe("MessageContent", () => {
       t: [{ render: () => <span>[tool]</span> }],
     };
     h.state.dataRenderers.renderers = {
-      d: () => <span>[data]</span>,
+      d: [() => <span>[data]</span>],
     };
     await mount();
 

package/src/primitives/message/MessageContent.tsx

@@ -81,6 +81,9 @@ const ToolUIDisplay = ({
         addResult={partMethods.addToolResult}
         resume={partMethods.resumeToolCall}
         respondToApproval={partMethods.respondToToolApproval}
+        {...(partMethods.unstable_recordInteraction && {
+          unstable_recordInteraction: partMethods.unstable_recordInteraction,
+        })}
       />
     );
   }
@@ -103,9 +106,8 @@ const DataUIDisplay = ({
   index: number;
 }) => {
   const Render = useAuiState((s) => {
-    const renders = s.dataRenderers.renderers[part.name];
-    if (Array.isArray(renders)) return renders[0];
-    return renders;
+    const named = s.dataRenderers.renderers[part.name]?.[0];
+    return named ?? s.dataRenderers.fallbacks[0];
   });
   if (Render) return <Render {...(part as DataMessagePartProps)} />;
   if (Fallback) return <Fallback part={part} index={index} />;

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";