@assistant-ui/react-native 0.1.27 → 0.1.29

package/src/primitives/composer/ComposerInput.test.tsx

@@ -0,0 +1,253 @@
+import { act } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { ComposerInput } from "./ComposerInput";
+
+const h = vi.hoisted(() => ({
+  setText: vi.fn<(text: string) => void>(),
+  sendSpy: vi.fn<() => void>(),
+  flushTapSyncSpy: vi.fn(<T,>(fn: () => T) => fn()),
+  composerState: { text: "" },
+  platform: { os: "web" as "web" | "ios" | "android" },
+}));
+
+vi.mock("@assistant-ui/store", () => {
+  const aui = {
+    composer: () => ({
+      setText: h.setText,
+      send: h.sendSpy,
+    }),
+  };
+  return {
+    useAui: () => aui,
+    useAuiState: <T,>(
+      selector: (s: { composer: typeof h.composerState }) => T,
+    ) => selector({ composer: h.composerState }),
+  };
+});
+
+vi.mock("@assistant-ui/tap", () => ({
+  flushTapSync: h.flushTapSyncSpy,
+}));
+
+vi.mock("react-native", async (importOriginal) => {
+  const actual = (await importOriginal()) as Record<string, unknown> & {
+    Platform: Record<string, unknown>;
+  };
+  return {
+    ...actual,
+    Platform: {
+      ...actual.Platform,
+      get OS() {
+        return h.platform.os;
+      },
+      select: (obj: Record<string, unknown>) =>
+        h.platform.os in obj ? obj[h.platform.os] : obj.default,
+    },
+  };
+});
+
+(globalThis as Record<string, unknown>).IS_REACT_ACT_ENVIRONMENT = true;
+
+const setNativeValue = (input: HTMLInputElement, value: string) => {
+  const setter = Object.getOwnPropertyDescriptor(
+    HTMLInputElement.prototype,
+    "value",
+  )?.set;
+  setter?.call(input, value);
+};
+
+const fireInput = (input: HTMLInputElement, value: string) => {
+  setNativeValue(input, value);
+  input.dispatchEvent(new InputEvent("input", { bubbles: true }));
+};
+
+const fireKeyDown = (
+  input: HTMLInputElement,
+  opts: {
+    key?: string;
+    shiftKey?: boolean;
+    isComposing?: boolean;
+    keyCode?: number;
+  } = {},
+): KeyboardEvent => {
+  const event = new KeyboardEvent("keydown", {
+    bubbles: true,
+    cancelable: true,
+    key: opts.key ?? "Enter",
+    shiftKey: opts.shiftKey ?? false,
+    isComposing: opts.isComposing ?? false,
+  });
+  if (opts.keyCode !== undefined) {
+    Object.defineProperty(event, "keyCode", { value: opts.keyCode });
+  }
+  input.dispatchEvent(event);
+  return event;
+};
+
+describe("ComposerInput", () => {
+  let container: HTMLDivElement;
+  let root: Root;
+
+  beforeEach(() => {
+    h.setText.mockReset();
+    h.sendSpy.mockReset();
+    h.flushTapSyncSpy.mockClear();
+    h.composerState.text = "";
+    h.platform.os = "web";
+
+    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 ComposerInput>[0]> = {},
+  ) => {
+    await act(async () => {
+      root.render(<ComposerInput {...props} />);
+    });
+    const input = container.querySelector("input") as HTMLInputElement;
+    expect(input).not.toBeNull();
+    return input;
+  };
+
+  it("renders an input controlled by the composer text", async () => {
+    h.composerState.text = "hello";
+    const input = await mount();
+    expect(input.value).toBe("hello");
+  });
+
+  describe("web", () => {
+    it("routes typing through setText wrapped in flushTapSync", async () => {
+      const input = await mount();
+
+      await act(async () => {
+        fireInput(input, "ni");
+      });
+
+      expect(h.setText).toHaveBeenCalledWith("ni");
+      expect(h.flushTapSyncSpy).toHaveBeenCalledTimes(1);
+    });
+
+    it("submits on plain Enter under the default submitMode", async () => {
+      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("inserts a newline on Shift+Enter without submitting", async () => {
+      const input = await mount();
+
+      let event!: KeyboardEvent;
+      await act(async () => {
+        event = fireKeyDown(input, { key: "Enter", shiftKey: true });
+      });
+
+      expect(h.sendSpy).not.toHaveBeenCalled();
+      expect(event.defaultPrevented).toBe(false);
+    });
+
+    it("ignores Enter while isComposing is set", async () => {
+      const input = await mount();
+
+      let event!: KeyboardEvent;
+      await act(async () => {
+        event = fireKeyDown(input, { key: "Enter", isComposing: true });
+      });
+
+      expect(h.sendSpy).not.toHaveBeenCalled();
+      expect(event.defaultPrevented).toBe(false);
+    });
+
+    it("ignores Enter while keyCode is the IME sentinel 229", async () => {
+      const input = await mount();
+
+      let event!: KeyboardEvent;
+      await act(async () => {
+        event = fireKeyDown(input, { key: "Enter", keyCode: 229 });
+      });
+
+      expect(h.sendSpy).not.toHaveBeenCalled();
+      expect(event.defaultPrevented).toBe(false);
+    });
+
+    it("does not submit on a non-Enter key", async () => {
+      const input = await mount();
+
+      await act(async () => {
+        fireKeyDown(input, { key: "a" });
+      });
+
+      expect(h.sendSpy).not.toHaveBeenCalled();
+    });
+
+    it("does not submit when submitMode is none", async () => {
+      const input = await mount({ submitMode: "none" });
+
+      let event!: KeyboardEvent;
+      await act(async () => {
+        event = fireKeyDown(input, { key: "Enter" });
+      });
+
+      expect(h.sendSpy).not.toHaveBeenCalled();
+      expect(event.defaultPrevented).toBe(false);
+    });
+
+    it("forwards keydown events to a consumer onKeyPress handler", async () => {
+      const onKeyPress = vi.fn();
+      const input = await mount({ onKeyPress });
+
+      await act(async () => {
+        fireKeyDown(input, { key: "Enter" });
+        fireKeyDown(input, { key: "a" });
+      });
+
+      expect(onKeyPress).toHaveBeenCalledTimes(2);
+    });
+  });
+
+  describe("native", () => {
+    beforeEach(() => {
+      h.platform.os = "ios";
+    });
+
+    it("routes typing through setText without flushTapSync", async () => {
+      const input = await mount();
+
+      await act(async () => {
+        fireInput(input, "ni");
+      });
+
+      expect(h.setText).toHaveBeenCalledWith("ni");
+      expect(h.flushTapSyncSpy).not.toHaveBeenCalled();
+    });
+
+    it("never submits on Enter and leaves the event untouched", async () => {
+      const onKeyPress = vi.fn();
+      const input = await mount({ onKeyPress });
+
+      let event!: KeyboardEvent;
+      await act(async () => {
+        event = fireKeyDown(input, { key: "Enter" });
+      });
+
+      expect(h.sendSpy).not.toHaveBeenCalled();
+      expect(event.defaultPrevented).toBe(false);
+      expect(onKeyPress).toHaveBeenCalledTimes(1);
+    });
+  });
+});

package/src/primitives/composer/ComposerInput.tsx

@@ -7,6 +7,7 @@ import {
   type TextInputProps,
 } from "react-native";
 import { useAui, useAuiState } from "@assistant-ui/store";
+import { flushTapSync } from "@assistant-ui/tap";
 
 export type ComposerInputProps = Omit<
   TextInputProps,
@@ -46,6 +47,13 @@ export const ComposerInput = ({
 
   const onChangeText = useCallback(
     (value: string) => {
+      if (Platform.OS === "web") {
+        // Keep the controlled value in sync mid-IME so react-dom does not reset the textarea to a stale value
+        flushTapSync(() => {
+          aui.composer().setText(value);
+        });
+        return;
+      }
       aui.composer().setText(value);
     },
     [aui],
@@ -66,7 +74,11 @@ export const ComposerInput = ({
 
       const nativeEvent = e.nativeEvent as TextInputKeyPressEventData & {
         shiftKey?: boolean;
+        isComposing?: boolean;
+        keyCode?: number;
       };
+      // react-native-web forwards the raw DOM keydown before its own composition guard, so re-check it here (mirrors isEventComposing)
+      if (nativeEvent.isComposing || nativeEvent.keyCode === 229) return;
       if (nativeEvent.key === "Enter" && !nativeEvent.shiftKey) {
         (e as unknown as Event).preventDefault?.();
         aui.composer().send();

package/src/primitives/composer/ComposerSend.test.tsx

@@ -0,0 +1,116 @@
+import { act } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { ComposerSend } from "./ComposerSend";
+
+const h = vi.hoisted(() => ({
+  send: vi.fn<() => void>(),
+  disabled: false,
+}));
+
+vi.mock("@assistant-ui/core/react", () => ({
+  useComposerSend: () => ({ send: h.send, disabled: h.disabled }),
+}));
+
+(globalThis as Record<string, unknown>).IS_REACT_ACT_ENVIRONMENT = true;
+
+const click = (el: Element) => {
+  el.dispatchEvent(
+    new MouseEvent("click", { bubbles: true, cancelable: true }),
+  );
+};
+
+describe("ComposerSend", () => {
+  let container: HTMLDivElement;
+  let root: Root;
+
+  beforeEach(() => {
+    h.send.mockReset();
+    h.disabled = 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 ComposerSend>[0]> = {},
+  ) => {
+    await act(async () => {
+      root.render(
+        <ComposerSend testID="send" {...props}>
+          send
+        </ComposerSend>,
+      );
+    });
+    const el = container.querySelector('[data-testid="send"]');
+    expect(el).not.toBeNull();
+    return el as Element;
+  };
+
+  it("renders its children", async () => {
+    const el = await mount();
+    expect(el.textContent).toBe("send");
+  });
+
+  it("calls send on press", async () => {
+    const el = await mount();
+
+    await act(async () => {
+      click(el);
+    });
+
+    expect(h.send).toHaveBeenCalledTimes(1);
+  });
+
+  it("does not press when the hook reports disabled", async () => {
+    h.disabled = true;
+    const el = await mount();
+
+    await act(async () => {
+      click(el);
+    });
+
+    expect(h.send).not.toHaveBeenCalled();
+  });
+
+  it("lets a false prop override the hook's disabled:true", async () => {
+    h.disabled = true;
+    const el = await mount({ disabled: false });
+
+    await act(async () => {
+      click(el);
+    });
+
+    expect(h.send).toHaveBeenCalledTimes(1);
+  });
+
+  it("lets a true prop override the hook's disabled:false", async () => {
+    h.disabled = false;
+    const el = await mount({ disabled: true });
+
+    await act(async () => {
+      click(el);
+    });
+
+    expect(h.send).not.toHaveBeenCalled();
+  });
+
+  it("defers to the hook when disabled is undefined", async () => {
+    h.disabled = false;
+    const el = await mount({ disabled: undefined });
+
+    await act(async () => {
+      click(el);
+    });
+
+    expect(h.send).toHaveBeenCalledTimes(1);
+  });
+});

package/src/primitives/error/ErrorMessage.test.tsx

@@ -0,0 +1,64 @@
+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 { ErrorMessage } from "./ErrorMessage";
+
+const h = vi.hoisted(() => ({
+  error: undefined as unknown,
+}));
+
+vi.mock("@assistant-ui/core/react", () => ({
+  useMessageError: () => h.error,
+}));
+
+(globalThis as Record<string, unknown>).IS_REACT_ACT_ENVIRONMENT = true;
+
+describe("ErrorMessage", () => {
+  let container: HTMLDivElement;
+  let root: Root;
+
+  beforeEach(() => {
+    h.error = undefined;
+    container = document.createElement("div");
+    document.body.appendChild(container);
+    root = createRoot(container);
+  });
+
+  afterEach(async () => {
+    await act(async () => {
+      root.unmount();
+    });
+    container.remove();
+  });
+
+  const mount = async (children?: React.ReactNode) => {
+    await act(async () => {
+      root.render(<ErrorMessage testID="msg">{children}</ErrorMessage>);
+    });
+    return container.querySelector('[data-testid="msg"]');
+  };
+
+  it("renders nothing when there is no error", async () => {
+    expect(await mount()).toBeNull();
+  });
+
+  it("falls back to String(error) when no children are given", async () => {
+    h.error = new Error("boom");
+    const el = await mount();
+    expect(el?.textContent).toBe("Error: boom");
+  });
+
+  it("stringifies a plain string error", async () => {
+    h.error = "kaboom";
+    const el = await mount();
+    expect(el?.textContent).toBe("kaboom");
+  });
+
+  it("renders children verbatim instead of the error when provided", async () => {
+    h.error = new Error("boom");
+    const el = await mount(<Text>custom</Text>);
+    expect(el?.textContent).toBe("custom");
+    expect(el?.textContent).not.toContain("boom");
+  });
+});

package/src/primitives/error/ErrorRoot.test.tsx

@@ -0,0 +1,65 @@
+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 { ErrorRoot } from "./ErrorRoot";
+
+const h = vi.hoisted(() => ({
+  error: undefined as unknown,
+}));
+
+vi.mock("@assistant-ui/core/react", () => ({
+  useMessageError: () => h.error,
+}));
+
+(globalThis as Record<string, unknown>).IS_REACT_ACT_ENVIRONMENT = true;
+
+describe("ErrorRoot", () => {
+  let container: HTMLDivElement;
+  let root: Root;
+
+  beforeEach(() => {
+    h.error = undefined;
+    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(
+        <ErrorRoot testID="root">
+          <Text testID="child">child</Text>
+        </ErrorRoot>,
+      );
+    });
+  };
+
+  it("renders nothing when there is no error", async () => {
+    await mount();
+    expect(container.querySelector('[data-testid="root"]')).toBeNull();
+    expect(container.querySelector('[data-testid="child"]')).toBeNull();
+  });
+
+  it("renders the view with children once an error is present", async () => {
+    h.error = new Error("boom");
+    await mount();
+    expect(container.querySelector('[data-testid="root"]')).not.toBeNull();
+    expect(container.querySelector('[data-testid="child"]')?.textContent).toBe(
+      "child",
+    );
+  });
+
+  it("treats a falsy-but-defined error as present", async () => {
+    h.error = "";
+    await mount();
+    expect(container.querySelector('[data-testid="root"]')).not.toBeNull();
+  });
+});