@assistant-ui/react-native 0.1.27 → 0.1.29

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

@@ -0,0 +1,56 @@
+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 { ThreadEmpty } from "./ThreadEmpty";
+
+const h = vi.hoisted(() => ({
+  isEmpty: true,
+}));
+
+vi.mock("@assistant-ui/core/react", () => ({
+  useThreadIsEmpty: () => h.isEmpty,
+}));
+
+(globalThis as Record<string, unknown>).IS_REACT_ACT_ENVIRONMENT = true;
+
+describe("ThreadEmpty", () => {
+  let container: HTMLDivElement;
+  let root: Root;
+
+  beforeEach(() => {
+    h.isEmpty = true;
+
+    container = document.createElement("div");
+    document.body.appendChild(container);
+    root = createRoot(container);
+  });
+
+  afterEach(async () => {
+    await act(async () => {
+      root.unmount();
+    });
+    container.remove();
+  });
+
+  const mount = async () => {
+    await act(async () => {
+      root.render(
+        <ThreadEmpty>
+          <Text testID="child">visible</Text>
+        </ThreadEmpty>,
+      );
+    });
+    return container.querySelector('[data-testid="child"]');
+  };
+
+  it("renders children when the thread is empty", async () => {
+    h.isEmpty = true;
+    expect(await mount()).not.toBeNull();
+  });
+
+  it("hides children when the thread is not empty", async () => {
+    h.isEmpty = false;
+    expect(await mount()).toBeNull();
+  });
+});

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

@@ -0,0 +1,121 @@
+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 { ThreadIf } from "./ThreadIf";
+
+const h = vi.hoisted(() => ({
+  thread: { messages: [] as unknown[], isRunning: false },
+}));
+
+vi.mock("@assistant-ui/store", () => ({
+  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.isRunning = false;
+
+    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 ThreadIf>[0]> = {}) => {
+    await act(async () => {
+      root.render(
+        <ThreadIf {...props}>
+          <Text testID="child">visible</Text>
+        </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);
+    expect(await mount()).not.toBeNull();
+  });
+
+  describe("empty guard", () => {
+    it("renders children when empty:true matches an empty thread", async () => {
+      setMessages(0);
+      expect(await mount({ empty: true })).not.toBeNull();
+    });
+
+    it("hides children when empty:true but the thread has messages", async () => {
+      setMessages(3);
+      expect(await mount({ empty: true })).toBeNull();
+    });
+
+    it("renders children when empty:false matches a non-empty thread", async () => {
+      setMessages(3);
+      expect(await mount({ empty: false })).not.toBeNull();
+    });
+
+    it("hides children when empty:false but the thread is empty", async () => {
+      setMessages(0);
+      expect(await mount({ empty: false })).toBeNull();
+    });
+  });
+
+  describe("running guard", () => {
+    it("renders children when running:true matches a running thread", async () => {
+      h.thread.isRunning = true;
+      expect(await mount({ running: true })).not.toBeNull();
+    });
+
+    it("hides children when running:true but the thread is idle", async () => {
+      h.thread.isRunning = false;
+      expect(await mount({ running: true })).toBeNull();
+    });
+
+    it("renders children when running:false matches an idle thread", async () => {
+      h.thread.isRunning = false;
+      expect(await mount({ running: false })).not.toBeNull();
+    });
+
+    it("hides children when running:false but the thread is running", async () => {
+      h.thread.isRunning = true;
+      expect(await mount({ running: false })).toBeNull();
+    });
+  });
+
+  describe("combined guards", () => {
+    it("renders children only when both empty and running match", async () => {
+      setMessages(0);
+      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.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.isRunning = true;
+      expect(await mount({ empty: true, running: true })).toBeNull();
+    });
+  });
+});

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

@@ -0,0 +1,192 @@
+import { act } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { ThreadMessages } from "./ThreadMessages";
+
+type Msg = { id: string; role: string };
+
+const h = vi.hoisted(() => ({
+  state: {
+    thread: { messages: [] as Msg[] },
+    message: { role: "user" as string, composer: { isEditing: false } },
+  },
+  itemState: { role: "user" } as { role: string },
+}));
+
+vi.mock("@assistant-ui/store", () => ({
+  useAuiState: <T,>(selector: (s: typeof h.state) => T) => selector(h.state),
+  RenderChildrenWithAccessor: ({
+    children,
+  }: {
+    children: (getItem: () => unknown) => unknown;
+  }) => children(() => h.itemState),
+}));
+
+vi.mock("@assistant-ui/core/react", () => ({
+  MessageByIndexProvider: ({ children }: { children: unknown }) => children,
+}));
+
+(globalThis as Record<string, unknown>).IS_REACT_ACT_ENVIRONMENT = true;
+
+describe("ThreadMessages", () => {
+  let container: HTMLDivElement;
+  let root: Root;
+
+  beforeEach(() => {
+    h.state.thread.messages = [];
+    h.state.message.role = "user";
+    h.state.message.composer.isEditing = false;
+    h.itemState = { role: "user" };
+
+    container = document.createElement("div");
+    document.body.appendChild(container);
+    root = createRoot(container);
+  });
+
+  afterEach(async () => {
+    await act(async () => {
+      root.unmount();
+    });
+    container.remove();
+  });
+
+  const mount = async (props: Parameters<typeof ThreadMessages>[0]) => {
+    await act(async () => {
+      root.render(<ThreadMessages {...props} />);
+    });
+  };
+
+  describe("components mode dispatch", () => {
+    const makeComponents = () => ({
+      Message: vi.fn(() => <span data-testid="c-message">message</span>),
+      EditComposer: vi.fn(() => <span data-testid="c-edit">edit</span>),
+      UserEditComposer: vi.fn(() => (
+        <span data-testid="c-user-edit">user-edit</span>
+      )),
+      AssistantEditComposer: vi.fn(() => (
+        <span data-testid="c-assistant-edit">assistant-edit</span>
+      )),
+      SystemEditComposer: vi.fn(() => (
+        <span data-testid="c-system-edit">system-edit</span>
+      )),
+      UserMessage: vi.fn(() => <span data-testid="c-user">user</span>),
+      AssistantMessage: vi.fn(() => (
+        <span data-testid="c-assistant">assistant</span>
+      )),
+      SystemMessage: vi.fn(() => <span data-testid="c-system">system</span>),
+    });
+
+    it("renders the user message component for a user role", async () => {
+      h.state.thread.messages = [{ id: "1", role: "user" }];
+      h.state.message.role = "user";
+      await mount({ components: makeComponents() });
+      expect(container.querySelector('[data-testid="c-user"]')).not.toBeNull();
+      expect(container.querySelector('[data-testid="c-message"]')).toBeNull();
+    });
+
+    it("renders the assistant message component for an assistant role", async () => {
+      h.state.thread.messages = [{ id: "1", role: "assistant" }];
+      h.state.message.role = "assistant";
+      await mount({ components: makeComponents() });
+      expect(
+        container.querySelector('[data-testid="c-assistant"]'),
+      ).not.toBeNull();
+    });
+
+    it("renders the system message component for a system role", async () => {
+      h.state.thread.messages = [{ id: "1", role: "system" }];
+      h.state.message.role = "system";
+      await mount({ components: makeComponents() });
+      expect(
+        container.querySelector('[data-testid="c-system"]'),
+      ).not.toBeNull();
+    });
+
+    it("prefers the role-specific edit composer while editing", async () => {
+      h.state.thread.messages = [{ id: "1", role: "user" }];
+      h.state.message.role = "user";
+      h.state.message.composer.isEditing = true;
+      await mount({ components: makeComponents() });
+      expect(
+        container.querySelector('[data-testid="c-user-edit"]'),
+      ).not.toBeNull();
+    });
+
+    it("falls back to the shared EditComposer when no role edit composer exists", async () => {
+      h.state.thread.messages = [{ id: "1", role: "user" }];
+      h.state.message.role = "user";
+      h.state.message.composer.isEditing = true;
+      const components = makeComponents() as Record<string, unknown>;
+      delete components.UserEditComposer;
+      await mount({ components: components as never });
+      expect(container.querySelector('[data-testid="c-edit"]')).not.toBeNull();
+    });
+
+    it("falls back to the role message then Message when no edit composer exists", async () => {
+      h.state.thread.messages = [{ id: "1", role: "assistant" }];
+      h.state.message.role = "assistant";
+      h.state.message.composer.isEditing = true;
+      const components = makeComponents() as Record<string, unknown>;
+      delete components.AssistantEditComposer;
+      delete components.EditComposer;
+      await mount({ components: components as never });
+      expect(
+        container.querySelector('[data-testid="c-assistant"]'),
+      ).not.toBeNull();
+    });
+
+    it("falls back to Message when no role-specific component exists", async () => {
+      h.state.thread.messages = [{ id: "1", role: "user" }];
+      h.state.message.role = "user";
+      const components = makeComponents() as Record<string, unknown>;
+      delete components.UserMessage;
+      await mount({ components: components as never });
+      expect(
+        container.querySelector('[data-testid="c-message"]'),
+      ).not.toBeNull();
+    });
+
+    it("renders nothing for a system role with no system or Message component", async () => {
+      h.state.thread.messages = [{ id: "1", role: "system" }];
+      h.state.message.role = "system";
+      const components = makeComponents() as Record<string, unknown>;
+      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";
+      await expect(mount({ components: makeComponents() })).rejects.toThrow(
+        /Unknown message role/,
+      );
+    });
+  });
+
+  describe("children mode", () => {
+    it("renders via the children render prop", async () => {
+      h.state.thread.messages = [{ id: "1", role: "user" }];
+      h.itemState = { role: "user" };
+      const children = vi.fn(({ message }: { message: { role: string } }) => (
+        <span data-testid="child">child:{message.role}</span>
+      ));
+      await mount({ children });
+      const el = container.querySelector('[data-testid="child"]');
+      expect(el?.textContent).toBe("child:user");
+      expect(children).toHaveBeenCalled();
+    });
+  });
+
+  it("renders no items for an empty thread", async () => {
+    h.state.thread.messages = [];
+    await mount({
+      components: {
+        Message: () => <span data-testid="c-message">message</span>,
+      } as never,
+    });
+    expect(container.querySelector('[data-testid="c-message"]')).toBeNull();
+  });
+});

package/src/primitives/thread.ts

@@ -7,6 +7,7 @@ export {
   type ThreadMessagesProps as MessagesProps,
 } from "./thread/ThreadMessages";
 export { ThreadPrimitiveMessageByIndex as MessageByIndex } from "@assistant-ui/core/react";
+export { ThreadPrimitiveUnstable_MessageById as Unstable_MessageById } from "@assistant-ui/core/react";
 export {
   ThreadEmpty as Empty,
   type ThreadEmptyProps as EmptyProps,

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

@@ -0,0 +1,72 @@
+import { act } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { ThreadListNew } from "./ThreadListNew";
+
+const h = vi.hoisted(() => ({
+  switchToNewThread: vi.fn<() => void>(),
+}));
+
+vi.mock("@assistant-ui/core/react", () => ({
+  useThreadListNew: () => ({ switchToNewThread: h.switchToNewThread }),
+}));
+
+(globalThis as Record<string, unknown>).IS_REACT_ACT_ENVIRONMENT = true;
+
+const click = (el: Element) =>
+  el.dispatchEvent(
+    new MouseEvent("click", { bubbles: true, cancelable: true }),
+  );
+
+describe("ThreadListNew", () => {
+  let container: HTMLDivElement;
+  let root: Root;
+
+  beforeEach(() => {
+    h.switchToNewThread.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 ThreadListNew>[0]> = {},
+  ) => {
+    await act(async () => {
+      root.render(
+        <ThreadListNew testID="t" {...props}>
+          new
+        </ThreadListNew>,
+      );
+    });
+    return container.querySelector('[data-testid="t"]') as HTMLElement;
+  };
+
+  it("fires switchToNewThread when pressed", async () => {
+    const el = await mount();
+
+    await act(async () => {
+      click(el);
+    });
+
+    expect(h.switchToNewThread).toHaveBeenCalledTimes(1);
+  });
+
+  it("does not fire when a disabled prop is passed through", async () => {
+    const el = await mount({ disabled: true });
+
+    await act(async () => {
+      click(el);
+    });
+
+    expect(h.switchToNewThread).not.toHaveBeenCalled();
+  });
+});

package/src/primitives/threadListItem/ThreadListItemArchive.test.tsx

@@ -0,0 +1,72 @@
+import { act } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { ThreadListItemArchive } from "./ThreadListItemArchive";
+
+const h = vi.hoisted(() => ({
+  archive: vi.fn<() => void>(),
+}));
+
+vi.mock("@assistant-ui/core/react", () => ({
+  useThreadListItemArchive: () => ({ archive: h.archive }),
+}));
+
+(globalThis as Record<string, unknown>).IS_REACT_ACT_ENVIRONMENT = true;
+
+const click = (el: Element) =>
+  el.dispatchEvent(
+    new MouseEvent("click", { bubbles: true, cancelable: true }),
+  );
+
+describe("ThreadListItemArchive", () => {
+  let container: HTMLDivElement;
+  let root: Root;
+
+  beforeEach(() => {
+    h.archive.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 ThreadListItemArchive>[0]> = {},
+  ) => {
+    await act(async () => {
+      root.render(
+        <ThreadListItemArchive testID="t" {...props}>
+          archive
+        </ThreadListItemArchive>,
+      );
+    });
+    return container.querySelector('[data-testid="t"]') as HTMLElement;
+  };
+
+  it("fires archive when pressed", async () => {
+    const el = await mount();
+
+    await act(async () => {
+      click(el);
+    });
+
+    expect(h.archive).toHaveBeenCalledTimes(1);
+  });
+
+  it("does not fire when a disabled prop is passed through", async () => {
+    const el = await mount({ disabled: true });
+
+    await act(async () => {
+      click(el);
+    });
+
+    expect(h.archive).not.toHaveBeenCalled();
+  });
+});

package/src/primitives/threadListItem/ThreadListItemDelete.test.tsx

@@ -0,0 +1,72 @@
+import { act } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { ThreadListItemDelete } from "./ThreadListItemDelete";
+
+const h = vi.hoisted(() => ({
+  deleteThread: vi.fn<() => void>(),
+}));
+
+vi.mock("@assistant-ui/core/react", () => ({
+  useThreadListItemDelete: () => ({ delete: h.deleteThread }),
+}));
+
+(globalThis as Record<string, unknown>).IS_REACT_ACT_ENVIRONMENT = true;
+
+const click = (el: Element) =>
+  el.dispatchEvent(
+    new MouseEvent("click", { bubbles: true, cancelable: true }),
+  );
+
+describe("ThreadListItemDelete", () => {
+  let container: HTMLDivElement;
+  let root: Root;
+
+  beforeEach(() => {
+    h.deleteThread.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 ThreadListItemDelete>[0]> = {},
+  ) => {
+    await act(async () => {
+      root.render(
+        <ThreadListItemDelete testID="t" {...props}>
+          delete
+        </ThreadListItemDelete>,
+      );
+    });
+    return container.querySelector('[data-testid="t"]') as HTMLElement;
+  };
+
+  it("fires the bound delete when pressed", async () => {
+    const el = await mount();
+
+    await act(async () => {
+      click(el);
+    });
+
+    expect(h.deleteThread).toHaveBeenCalledTimes(1);
+  });
+
+  it("does not fire when a disabled prop is passed through", async () => {
+    const el = await mount({ disabled: true });
+
+    await act(async () => {
+      click(el);
+    });
+
+    expect(h.deleteThread).not.toHaveBeenCalled();
+  });
+});

package/src/primitives/threadListItem/ThreadListItemTrigger.test.tsx

@@ -0,0 +1,72 @@
+import { act } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { ThreadListItemTrigger } from "./ThreadListItemTrigger";
+
+const h = vi.hoisted(() => ({
+  switchTo: vi.fn<() => void>(),
+}));
+
+vi.mock("@assistant-ui/core/react", () => ({
+  useThreadListItemTrigger: () => ({ switchTo: h.switchTo }),
+}));
+
+(globalThis as Record<string, unknown>).IS_REACT_ACT_ENVIRONMENT = true;
+
+const click = (el: Element) =>
+  el.dispatchEvent(
+    new MouseEvent("click", { bubbles: true, cancelable: true }),
+  );
+
+describe("ThreadListItemTrigger", () => {
+  let container: HTMLDivElement;
+  let root: Root;
+
+  beforeEach(() => {
+    h.switchTo.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 ThreadListItemTrigger>[0]> = {},
+  ) => {
+    await act(async () => {
+      root.render(
+        <ThreadListItemTrigger testID="t" {...props}>
+          open
+        </ThreadListItemTrigger>,
+      );
+    });
+    return container.querySelector('[data-testid="t"]') as HTMLElement;
+  };
+
+  it("fires switchTo when pressed", async () => {
+    const el = await mount();
+
+    await act(async () => {
+      click(el);
+    });
+
+    expect(h.switchTo).toHaveBeenCalledTimes(1);
+  });
+
+  it("does not fire when a disabled prop is passed through", async () => {
+    const el = await mount({ disabled: true });
+
+    await act(async () => {
+      click(el);
+    });
+
+    expect(h.switchTo).not.toHaveBeenCalled();
+  });
+});