@assistant-ui/react-native 0.1.36 → 0.1.38

package/src/primitives/queueItem/QueueItemSteer.tsx

@@ -0,0 +1,31 @@
+import { useCallback } from "react";
+import { Pressable, type PressableProps } from "react-native";
+import { useAui } from "@assistant-ui/store";
+
+export type QueueItemSteerProps = Omit<
+  PressableProps,
+  "onPress" | "children"
+> & {
+  children: PressableProps["children"];
+};
+
+export const QueueItemSteer = ({
+  children,
+  ...pressableProps
+}: QueueItemSteerProps) => {
+  const aui = useAui();
+
+  const handleSteer = useCallback(() => {
+    aui.queueItem.steer();
+  }, [aui]);
+
+  return (
+    <Pressable
+      onPress={handleSteer}
+      accessibilityRole="button"
+      {...pressableProps}
+    >
+      {children}
+    </Pressable>
+  );
+};

package/src/primitives/queueItem/QueueItemText.tsx

@@ -0,0 +1,22 @@
+import type { ReactNode } from "react";
+import { Text, type TextProps } from "react-native";
+import { useAuiState } from "@assistant-ui/store";
+
+export type QueueItemTextProps = TextProps & {
+  children?: ReactNode;
+};
+
+export const QueueItemText = ({
+  children,
+  ...textProps
+}: QueueItemTextProps) => {
+  const text = useAuiState((s) =>
+    // hosts on the pre-parts adapter shape may omit the field at runtime
+    (s.queueItem.parts ?? [])
+      .filter((part) => part.type === "text")
+      .map((part) => part.text)
+      .join("\n\n"),
+  );
+
+  return <Text {...textProps}>{children ?? text}</Text>;
+};

package/src/primitives/queueItem.ts

@@ -0,0 +1,12 @@
+export {
+  QueueItemText as Text,
+  type QueueItemTextProps as TextProps,
+} from "./queueItem/QueueItemText";
+export {
+  QueueItemRemove as Remove,
+  type QueueItemRemoveProps as RemoveProps,
+} from "./queueItem/QueueItemRemove";
+export {
+  QueueItemSteer as Steer,
+  type QueueItemSteerProps as SteerProps,
+} from "./queueItem/QueueItemSteer";

package/src/primitives/suggestion/SuggestionTrigger.tsx

@@ -1,10 +1,12 @@
-import type { ReactNode } from "react";
 import { Pressable, type PressableProps } from "react-native";
 import { useAuiState } from "@assistant-ui/store";
 import { useSuggestionTrigger } from "@assistant-ui/core/react";
 
-export type SuggestionTriggerProps = Omit<PressableProps, "onPress"> & {
-  children: ReactNode;
+export type SuggestionTriggerProps = Omit<
+  PressableProps,
+  "onPress" | "children"
+> & {
+  children: PressableProps["children"];
   /**
    * When true, automatically sends the message.
    * When false, replaces or appends the composer text with the suggestion.
@@ -36,6 +38,7 @@ export const SuggestionTrigger = ({
     <Pressable
       onPress={trigger}
       disabled={disabledProp ?? disabled}
+      accessibilityRole="button"
       {...pressableProps}
     >
       {children}

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

@@ -1,16 +1,30 @@
+import type { ReactNode } from "react";
 import { act } from "react";
 import { createRoot, type Root } from "react-dom/client";
 import { Text } from "react-native";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import type * as Store from "@assistant-ui/store";
 import { ThreadEmpty } from "./ThreadEmpty";
 
 const h = vi.hoisted(() => ({
   isEmpty: true,
 }));
 
-vi.mock("@assistant-ui/core/react", () => ({
-  useThreadIsEmpty: () => h.isEmpty,
-}));
+type ThreadSlice = { thread: { isEmpty: boolean } };
+
+vi.mock("@assistant-ui/store", async (importOriginal) => {
+  const actual = await importOriginal<typeof Store>();
+  return {
+    ...actual,
+    AuiIf: ({
+      condition,
+      children,
+    }: {
+      condition: (s: ThreadSlice) => boolean;
+      children: ReactNode;
+    }) => (condition({ thread: { isEmpty: h.isEmpty } }) ? children : null),
+  };
+});
 
 (globalThis as Record<string, unknown>).IS_REACT_ACT_ENVIRONMENT = true;
 

package/src/primitives/thread/ThreadEmpty.tsx

@@ -1,12 +1,13 @@
 import type { ReactNode } from "react";
-import { useThreadIsEmpty } from "@assistant-ui/core/react";
+import { AuiIf } from "@assistant-ui/store";
 
 export type ThreadEmptyProps = {
   children: ReactNode;
 };
 
-export const ThreadEmpty = ({ children }: ThreadEmptyProps) => {
-  const isEmpty = useThreadIsEmpty();
-  if (!isEmpty) return null;
-  return <>{children}</>;
-};
+/**
+ * @deprecated Use `<AuiIf condition={(s) => s.thread.isEmpty} />` instead.
+ */
+export const ThreadEmpty = ({ children }: ThreadEmptyProps) => (
+  <AuiIf condition={(s) => s.thread.isEmpty}>{children}</AuiIf>
+);

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

@@ -2,25 +2,29 @@ import { act } from "react";
 import { createRoot, type Root } from "react-dom/client";
 import { Text } from "react-native";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import type * as Store from "@assistant-ui/store";
 import { ThreadIf } from "./ThreadIf";
 
 const h = vi.hoisted(() => ({
-  thread: { messages: [] as unknown[], isRunning: false },
+  thread: { isEmpty: true, isRunning: false },
 }));
 
-vi.mock("@assistant-ui/store", () => ({
-  useAuiState: <T,>(selector: (s: { thread: typeof h.thread }) => T) =>
-    selector({ thread: h.thread }),
-}));
+vi.mock("@assistant-ui/store", async (importOriginal) => {
+  const actual = await importOriginal<typeof Store>();
+  return {
+    ...actual,
+    useAuiState: <T,>(selector: (s: { thread: typeof h.thread }) => T) =>
+      selector({ thread: h.thread }),
+  };
+});
 
 (globalThis as Record<string, unknown>).IS_REACT_ACT_ENVIRONMENT = true;
 
 describe("ThreadIf", () => {
   let container: HTMLDivElement;
   let root: Root;
-
   beforeEach(() => {
-    h.thread.messages = [];
+    h.thread.isEmpty = true;
     h.thread.isRunning = false;
 
     container = document.createElement("div");
@@ -46,33 +50,29 @@ describe("ThreadIf", () => {
     return container.querySelector('[data-testid="child"]');
   };
 
-  const setMessages = (count: number) => {
-    h.thread.messages = Array.from({ length: count }, (_, i) => i);
-  };
-
   it("renders children when no guard is set", async () => {
-    setMessages(2);
+    h.thread.isEmpty = false;
     expect(await mount()).not.toBeNull();
   });
 
   describe("empty guard", () => {
     it("renders children when empty:true matches an empty thread", async () => {
-      setMessages(0);
+      h.thread.isEmpty = true;
       expect(await mount({ empty: true })).not.toBeNull();
     });
 
-    it("hides children when empty:true but the thread has messages", async () => {
-      setMessages(3);
+    it("hides children when empty:true but the thread is not empty", async () => {
+      h.thread.isEmpty = false;
       expect(await mount({ empty: true })).toBeNull();
     });
 
     it("renders children when empty:false matches a non-empty thread", async () => {
-      setMessages(3);
+      h.thread.isEmpty = false;
       expect(await mount({ empty: false })).not.toBeNull();
     });
 
     it("hides children when empty:false but the thread is empty", async () => {
-      setMessages(0);
+      h.thread.isEmpty = true;
       expect(await mount({ empty: false })).toBeNull();
     });
   });
@@ -101,19 +101,19 @@ describe("ThreadIf", () => {
 
   describe("combined guards", () => {
     it("renders children only when both empty and running match", async () => {
-      setMessages(0);
+      h.thread.isEmpty = true;
       h.thread.isRunning = true;
       expect(await mount({ empty: true, running: true })).not.toBeNull();
     });
 
     it("hides children when empty matches but running does not", async () => {
-      setMessages(0);
+      h.thread.isEmpty = true;
       h.thread.isRunning = false;
       expect(await mount({ empty: true, running: true })).toBeNull();
     });
 
     it("hides children when running matches but empty does not", async () => {
-      setMessages(2);
+      h.thread.isEmpty = false;
       h.thread.isRunning = true;
       expect(await mount({ empty: true, running: true })).toBeNull();
     });

package/src/primitives/thread/ThreadIf.tsx

@@ -7,17 +7,14 @@ export type ThreadIfProps = {
   running?: boolean | undefined;
 };
 
+/**
+ * @deprecated Use `<AuiIf condition={(s) => s.thread...} />` instead.
+ */
 export const ThreadIf = ({ children, empty, running }: ThreadIfProps) => {
   const thread = useAuiState((s) => s.thread);
 
-  if (empty !== undefined) {
-    const isEmpty = thread.messages.length === 0;
-    if (empty !== isEmpty) return null;
-  }
-
-  if (running !== undefined) {
-    if (running !== thread.isRunning) return null;
-  }
+  if (empty !== undefined && empty !== thread.isEmpty) return null;
+  if (running !== undefined && running !== thread.isRunning) return null;
 
   return <>{children}</>;
 };

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

@@ -273,6 +273,20 @@ describe("ThreadMessages", () => {
       expect(container.querySelector('[data-testid="c-message"]')).toBeNull();
     });
 
+    it("renders nothing for an editing system role with no system or Message component", async () => {
+      h.state.thread.messages = [{ id: "1", role: "system" }];
+      h.state.message.role = "system";
+      h.state.message.composer.isEditing = true;
+      const components = makeComponents() as Record<string, unknown>;
+      delete components.SystemEditComposer;
+      delete components.EditComposer;
+      delete components.SystemMessage;
+      delete components.Message;
+      await mount({ components: components as never });
+      expect(container.querySelector('[data-testid="c-system"]')).toBeNull();
+      expect(container.querySelector('[data-testid="c-message"]')).toBeNull();
+    });
+
     it("throws for an unknown role", async () => {
       h.state.thread.messages = [{ id: "1", role: "ghost" }];
       h.state.message.role = "ghost";
@@ -354,7 +368,7 @@ describe("ThreadMessages", () => {
       props.onContentSizeChange?.(0, 140);
     });
     await emit("thread.runStart");
-    await emit("threadListItem.switchedTo");
+    await emit("threads.selectionChanged");
 
     expect(h.scrollToEnd).not.toHaveBeenCalled();
   });
@@ -442,7 +456,7 @@ describe("ThreadMessages", () => {
       const props = getFlatListProps();
       h.scrollToEnd.mockClear();
 
-      await emit("threadListItem.switchedTo");
+      await emit("threads.selectionChanged");
       expect(h.scrollToEnd).toHaveBeenCalledTimes(1);
 
       await act(async () => {
@@ -560,7 +574,7 @@ describe("ThreadMessages", () => {
       await mountFlatList({ components: messageComponents });
       h.scrollToEnd.mockClear();
 
-      await emit("threadListItem.switchedTo");
+      await emit("threads.selectionChanged");
 
       expect(h.scrollToEnd).toHaveBeenCalledWith({ animated: false });
     });
@@ -573,7 +587,7 @@ describe("ThreadMessages", () => {
       });
       h.scrollToEnd.mockClear();
 
-      await emit("threadListItem.switchedTo");
+      await emit("threads.selectionChanged");
 
       h.state.thread.messages = [
         { id: "2", role: "user" },

package/src/primitives/thread/ThreadMessages.tsx

@@ -111,7 +111,8 @@ const getComponent = (
           components.SystemEditComposer ??
           components.EditComposer ??
           components.SystemMessage ??
-          (components.Message as ComponentType)
+          (components.Message as ComponentType) ??
+          DEFAULT_SYSTEM_MESSAGE
         );
       } else {
         return (
@@ -348,7 +349,7 @@ const useThreadMessagesFlatListAutoScroll = ({
     scrollToBottom(true);
   });
 
-  useAuiEvent("threadListItem.switchedTo", () => {
+  useAuiEvent("threads.selectionChanged", () => {
     if (!scrollToBottomOnThreadSwitch) return;
     initializeScrollRequestedRef.current = false;
     lastScrollEventYRef.current = 0;

package/src/primitives/thread/ThreadSuggestion.tsx

@@ -1,9 +1,11 @@
-import type { ReactNode } from "react";
 import { Pressable, type PressableProps } from "react-native";
 import { useSuggestionTrigger } from "@assistant-ui/core/react";
 
-export type ThreadSuggestionProps = Omit<PressableProps, "onPress"> & {
-  children: ReactNode;
+export type ThreadSuggestionProps = Omit<
+  PressableProps,
+  "onPress" | "children"
+> & {
+  children: PressableProps["children"];
   /** The suggestion prompt. */
   prompt: string;
   /**
@@ -37,6 +39,7 @@ export const ThreadSuggestion = ({
     <Pressable
       onPress={trigger}
       disabled={disabledProp ?? disabled}
+      accessibilityRole="button"
       {...pressableProps}
     >
       {children}

package/src/primitives/threadList/ThreadListItems.test.tsx

@@ -0,0 +1,166 @@
+import { act } 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 { ThreadListItems } from "./ThreadListItems";
+
+const h = vi.hoisted(() => ({
+  state: { threads: { threadIds: [] as string[] } },
+  flatListProps: null as Record<string, unknown> | null,
+  providerProps: vi.fn(),
+}));
+
+vi.mock("react-native", async (importOriginal) => {
+  const actual = await importOriginal<typeof import("react-native")>();
+  const React = await import("react");
+
+  const FlatListMock = React.forwardRef(function FlatListMock(
+    props: Record<string, unknown>,
+    _ref,
+  ) {
+    h.flatListProps = props;
+
+    const data = (props.data as unknown[]) ?? [];
+    const renderItem = props.renderItem as
+      | ((value: { item: unknown; index: number }) => React.ReactNode)
+      | undefined;
+    const keyExtractor = props.keyExtractor as
+      | ((item: unknown, index: number) => string)
+      | undefined;
+
+    return React.createElement(
+      "div",
+      { "data-testid": "flatlist" },
+      data.map((item, index) =>
+        React.createElement(
+          "div",
+          { key: keyExtractor?.(item, index) ?? index },
+          renderItem?.({ item, index }),
+        ),
+      ),
+    );
+  });
+
+  return {
+    ...actual,
+    FlatList: FlatListMock,
+  };
+});
+
+vi.mock("@assistant-ui/store", async (importOriginal) => {
+  const actual = await importOriginal<typeof import("@assistant-ui/store")>();
+  return {
+    ...actual,
+    useAuiState: <T,>(selector: (s: typeof h.state) => T) => selector(h.state),
+  };
+});
+
+vi.mock("@assistant-ui/core/react", async (importOriginal) => {
+  const actual =
+    await importOriginal<typeof import("@assistant-ui/core/react")>();
+  return {
+    ...actual,
+    ThreadListItemByIndexProvider: ({
+      index,
+      archived,
+      children,
+    }: {
+      index: number;
+      archived: boolean;
+      children?: React.ReactNode;
+    }) => {
+      h.providerProps({ index, archived });
+      return <>{children}</>;
+    },
+  };
+});
+
+(globalThis as Record<string, unknown>).IS_REACT_ACT_ENVIRONMENT = true;
+
+describe("ThreadListItems", () => {
+  let container: HTMLDivElement;
+  let root: Root;
+
+  beforeEach(() => {
+    h.state.threads.threadIds = [];
+    h.flatListProps = null;
+    h.providerProps.mockReset();
+
+    container = document.createElement("div");
+    document.body.appendChild(container);
+    root = createRoot(container);
+  });
+
+  afterEach(async () => {
+    await act(async () => {
+      root.unmount();
+    });
+    container.remove();
+  });
+
+  const mount = async (
+    props: Partial<Parameters<typeof ThreadListItems>[0]> = {},
+  ) => {
+    await act(async () => {
+      root.render(
+        <ThreadListItems
+          renderItem={({ threadId }) => <Text>{threadId}</Text>}
+          {...props}
+        />,
+      );
+    });
+  };
+
+  it("wraps each row in ThreadListItemByIndexProvider with its index", async () => {
+    h.state.threads.threadIds = ["t-1", "t-2", "t-3"];
+
+    await mount();
+
+    expect(h.providerProps.mock.calls.map((call) => call[0])).toEqual([
+      { index: 0, archived: false },
+      { index: 1, archived: false },
+      { index: 2, archived: false },
+    ]);
+    expect(container.textContent).toContain("t-1");
+    expect(container.textContent).toContain("t-3");
+  });
+
+  it("passes threadId and index to renderItem", async () => {
+    const renderItem = vi.fn(
+      ({ threadId }: { threadId: string; index: number }) => (
+        <Text>{threadId}</Text>
+      ),
+    );
+    h.state.threads.threadIds = ["a", "b"];
+
+    await mount({ renderItem });
+
+    expect(renderItem.mock.calls.map((call) => call[0])).toEqual([
+      { threadId: "a", index: 0 },
+      { threadId: "b", index: 1 },
+    ]);
+  });
+
+  it("keys rows by threadId via keyExtractor", async () => {
+    h.state.threads.threadIds = ["t-1", "t-2"];
+
+    await mount();
+
+    const keyExtractor = h.flatListProps?.keyExtractor as (
+      item: string,
+      index: number,
+    ) => string;
+    expect(keyExtractor("t-1", 0)).toBe("t-1");
+    expect(keyExtractor("t-2", 1)).toBe("t-2");
+    expect(h.flatListProps?.data).toEqual(["t-1", "t-2"]);
+  });
+
+  it("forwards extra FlatList props", async () => {
+    h.state.threads.threadIds = ["t-1"];
+
+    await mount({ horizontal: true, testID: "thread-list" });
+
+    expect(h.flatListProps?.horizontal).toBe(true);
+    expect(h.flatListProps?.testID).toBe("thread-list");
+  });
+});

package/src/primitives/threadList/ThreadListItems.tsx

@@ -1,6 +1,7 @@
 import { type ReactElement, useCallback } from "react";
 import { FlatList, type FlatListProps } from "react-native";
 import { useAuiState } from "@assistant-ui/store";
+import { ThreadListItemByIndexProvider } from "@assistant-ui/core/react";
 
 export type ThreadListItemsProps = Omit<
   FlatListProps<string>,
@@ -17,7 +18,11 @@ export const ThreadListItems = ({
 
   const renderFlatListItem = useCallback(
     ({ item, index }: { item: string; index: number }) => {
-      return renderItem({ threadId: item, index });
+      return (
+        <ThreadListItemByIndexProvider index={index} archived={false}>
+          {renderItem({ threadId: item, index })}
+        </ThreadListItemByIndexProvider>
+      );
     },
     [renderItem],
   );