@assistant-ui/react-native 0.1.26 → 0.1.28

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

@@ -0,0 +1,278 @@
+import { act, type ReactElement } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { MessageContent } from "./MessageContent";
+
+type AnyPart = { type: string; [key: string]: unknown };
+
+const h = vi.hoisted(() => ({
+  addToolResult: vi.fn(),
+  resumeToolCall: vi.fn(),
+  respondToToolApproval: vi.fn(),
+  state: {
+    message: { content: [] as AnyPart[] },
+    tools: { tools: {} as Record<string, unknown> },
+    dataRenderers: { renderers: {} as Record<string, unknown> },
+  },
+}));
+
+vi.mock("@assistant-ui/store", () => {
+  const aui = {
+    message: () => ({
+      part: ({ index }: { index: number }) => ({
+        addToolResult: (...args: unknown[]) => h.addToolResult(index, ...args),
+        resumeToolCall: (...args: unknown[]) =>
+          h.resumeToolCall(index, ...args),
+        respondToToolApproval: (...args: unknown[]) =>
+          h.respondToToolApproval(index, ...args),
+      }),
+    }),
+  };
+  return {
+    useAui: () => aui,
+    useAuiState: <T,>(selector: (s: typeof h.state) => T) => selector(h.state),
+  };
+});
+
+(globalThis as Record<string, unknown>).IS_REACT_ACT_ENVIRONMENT = true;
+
+describe("MessageContent", () => {
+  let container: HTMLDivElement;
+  let root: Root;
+
+  beforeEach(() => {
+    h.addToolResult.mockReset();
+    h.resumeToolCall.mockReset();
+    h.respondToToolApproval.mockReset();
+    h.state.message.content = [];
+    h.state.tools.tools = {};
+    h.state.dataRenderers.renderers = {};
+
+    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 MessageContent>[0]> = {},
+  ) => {
+    await act(async () => {
+      root.render(<MessageContent {...props} />);
+    });
+  };
+
+  it("renders a text part through the default text renderer", async () => {
+    h.state.message.content = [{ type: "text", text: "hello world" }];
+    await mount();
+    expect(container.textContent).toContain("hello world");
+  });
+
+  it("prefers a provided renderText over the default renderer", async () => {
+    h.state.message.content = [{ type: "text", text: "raw" }];
+    const renderText = vi.fn(
+      ({ part, index }): ReactElement => (
+        <span data-testid={`text-${index}`}>custom:{part.text}</span>
+      ),
+    );
+    await mount({ renderText });
+
+    expect(renderText).toHaveBeenCalledTimes(1);
+    expect(renderText).toHaveBeenCalledWith({
+      part: { type: "text", text: "raw" },
+      index: 0,
+    });
+    const el = container.querySelector('[data-testid="text-0"]');
+    expect(el?.textContent).toBe("custom:raw");
+    expect(container.innerHTML).not.toContain(">raw<");
+  });
+
+  it("renders nothing for an unknown part type", async () => {
+    h.state.message.content = [{ type: "mystery" }];
+    await mount();
+    expect(container.textContent).toBe("");
+  });
+
+  it("renders null for optional parts when no renderer is provided", async () => {
+    h.state.message.content = [
+      { type: "image", image: "x" },
+      { type: "reasoning", text: "r" },
+      { type: "source", sourceType: "url", id: "1", url: "u" },
+      { type: "file", filename: "f" },
+    ];
+    await mount();
+    expect(container.textContent).toBe("");
+  });
+
+  it("renders optional parts via their provided renderers", async () => {
+    h.state.message.content = [
+      { type: "image", image: "x" },
+      { type: "reasoning", text: "r" },
+      { type: "source", sourceType: "url", id: "1", url: "u" },
+      { type: "file", filename: "f" },
+    ];
+    const renderImage = vi.fn(
+      ({ index }): ReactElement => <span>image-{index}</span>,
+    );
+    const renderReasoning = vi.fn(
+      ({ index }): ReactElement => <span>reasoning-{index}</span>,
+    );
+    const renderSource = vi.fn(
+      ({ index }): ReactElement => <span>source-{index}</span>,
+    );
+    const renderFile = vi.fn(
+      ({ index }): ReactElement => <span>file-{index}</span>,
+    );
+    await mount({ renderImage, renderReasoning, renderSource, renderFile });
+
+    expect(container.textContent).toBe("image-0reasoning-1source-2file-3");
+    expect(renderImage).toHaveBeenCalledWith({
+      part: h.state.message.content[0],
+      index: 0,
+    });
+    expect(renderFile).toHaveBeenCalledWith({
+      part: h.state.message.content[3],
+      index: 3,
+    });
+  });
+
+  describe("tool-call parts", () => {
+    it("renders a registered tool renderer with part methods wired in", async () => {
+      h.state.message.content = [
+        { type: "tool-call", toolName: "search", toolCallId: "c1" },
+      ];
+      const ToolRender = vi.fn((props: Record<string, unknown>) => {
+        (props.addResult as () => void)();
+        (props.resume as () => void)();
+        (props.respondToApproval as () => void)();
+        return <span data-testid="tool">tool:{String(props.toolName)}</span>;
+      });
+      h.state.tools.tools = { search: ToolRender };
+
+      await mount();
+
+      const el = container.querySelector('[data-testid="tool"]');
+      expect(el?.textContent).toBe("tool:search");
+      expect(h.addToolResult).toHaveBeenCalledWith(0);
+      expect(h.resumeToolCall).toHaveBeenCalledWith(0);
+      expect(h.respondToToolApproval).toHaveBeenCalledWith(0);
+    });
+
+    it("picks the first renderer when the registry holds an array", async () => {
+      h.state.message.content = [
+        { type: "tool-call", toolName: "search", toolCallId: "c1" },
+      ];
+      const First = vi.fn(() => <span data-testid="first">first</span>);
+      const Second = vi.fn(() => <span>second</span>);
+      h.state.tools.tools = { search: [First, Second] };
+
+      await mount();
+
+      expect(container.querySelector('[data-testid="first"]')).not.toBeNull();
+      expect(First).toHaveBeenCalledTimes(1);
+      expect(Second).not.toHaveBeenCalled();
+    });
+
+    it("falls back to renderToolCall when no renderer is registered", async () => {
+      h.state.message.content = [
+        { type: "tool-call", toolName: "search", toolCallId: "c1" },
+      ];
+      const renderToolCall = vi.fn(
+        ({ part, index }): ReactElement => (
+          <span data-testid="fallback">
+            fallback:{String(part.toolName)}:{index}
+          </span>
+        ),
+      );
+      await mount({ renderToolCall });
+
+      const el = container.querySelector('[data-testid="fallback"]');
+      expect(el?.textContent).toBe("fallback:search:0");
+      expect(renderToolCall.mock.calls[0]![0]).toEqual({
+        part: h.state.message.content[0],
+        index: 0,
+      });
+    });
+
+    it("renders null when no renderer is registered and no fallback is given", async () => {
+      h.state.message.content = [
+        { type: "tool-call", toolName: "search", toolCallId: "c1" },
+      ];
+      await mount();
+      expect(container.textContent).toBe("");
+    });
+  });
+
+  describe("data parts", () => {
+    it("renders a registered data renderer", async () => {
+      h.state.message.content = [
+        { type: "data", name: "chart", data: { a: 1 } },
+      ];
+      const DataRender = vi.fn((props: Record<string, unknown>) => (
+        <span data-testid="data">data:{String(props.name)}</span>
+      ));
+      h.state.dataRenderers.renderers = { chart: DataRender };
+
+      await mount();
+
+      const el = container.querySelector('[data-testid="data"]');
+      expect(el?.textContent).toBe("data:chart");
+    });
+
+    it("picks the first data renderer when the registry holds an array", async () => {
+      h.state.message.content = [{ type: "data", name: "chart", data: {} }];
+      const First = vi.fn(() => <span data-testid="dfirst">first</span>);
+      const Second = vi.fn(() => <span>second</span>);
+      h.state.dataRenderers.renderers = { chart: [First, Second] };
+
+      await mount();
+
+      expect(container.querySelector('[data-testid="dfirst"]')).not.toBeNull();
+      expect(Second).not.toHaveBeenCalled();
+    });
+
+    it("falls back to renderData when no renderer is registered", async () => {
+      h.state.message.content = [{ type: "data", name: "chart", data: {} }];
+      const renderData = vi.fn(
+        ({ part, index }): ReactElement => (
+          <span data-testid="dfallback">
+            fallback:{String(part.name)}:{index}
+          </span>
+        ),
+      );
+      await mount({ renderData });
+
+      const el = container.querySelector('[data-testid="dfallback"]');
+      expect(el?.textContent).toBe("fallback:chart:0");
+    });
+
+    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();
+      expect(container.textContent).toBe("");
+    });
+  });
+
+  it("dispatches a mixed content array in order", async () => {
+    h.state.message.content = [
+      { type: "text", text: "A" },
+      { type: "tool-call", toolName: "t", toolCallId: "c" },
+      { type: "data", name: "d", data: {} },
+    ];
+    h.state.tools.tools = {
+      t: () => <span>[tool]</span>,
+    };
+    h.state.dataRenderers.renderers = {
+      d: () => <span>[data]</span>,
+    };
+    await mount();
+
+    expect(container.textContent).toBe("A[tool][data]");
+  });
+});

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

@@ -0,0 +1,156 @@
+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 { MessageIf } from "./MessageIf";
+
+const h = vi.hoisted(() => ({
+  message: {
+    role: "assistant" as "user" | "assistant" | "system",
+    status: { type: "complete" as "running" | "complete" | "incomplete" },
+    isLast: false,
+  },
+}));
+
+vi.mock("@assistant-ui/store", () => ({
+  useAuiState: <T,>(selector: (s: { message: typeof h.message }) => T) =>
+    selector({ message: h.message }),
+}));
+
+(globalThis as Record<string, unknown>).IS_REACT_ACT_ENVIRONMENT = true;
+
+describe("MessageIf", () => {
+  let container: HTMLDivElement;
+  let root: Root;
+
+  beforeEach(() => {
+    h.message.role = "assistant";
+    h.message.status = { type: "complete" };
+    h.message.isLast = 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 MessageIf>[0]> = {},
+  ) => {
+    await act(async () => {
+      root.render(
+        <MessageIf {...props}>
+          <Text testID="child">visible</Text>
+        </MessageIf>,
+      );
+    });
+    return container.querySelector('[data-testid="child"]');
+  };
+
+  it("renders children when no guard is set", async () => {
+    expect(await mount()).not.toBeNull();
+  });
+
+  describe("user guard", () => {
+    it("renders children when user:true matches a user message", async () => {
+      h.message.role = "user";
+      expect(await mount({ user: true })).not.toBeNull();
+    });
+
+    it("hides children when user:true but the message is from the assistant", async () => {
+      h.message.role = "assistant";
+      expect(await mount({ user: true })).toBeNull();
+    });
+
+    it("renders children when user:false matches a non-user message", async () => {
+      h.message.role = "assistant";
+      expect(await mount({ user: false })).not.toBeNull();
+    });
+
+    it("hides children when user:false but the message is from the user", async () => {
+      h.message.role = "user";
+      expect(await mount({ user: false })).toBeNull();
+    });
+  });
+
+  describe("assistant guard", () => {
+    it("renders children when assistant:true matches an assistant message", async () => {
+      h.message.role = "assistant";
+      expect(await mount({ assistant: true })).not.toBeNull();
+    });
+
+    it("hides children when assistant:true but the message is from the user", async () => {
+      h.message.role = "user";
+      expect(await mount({ assistant: true })).toBeNull();
+    });
+
+    it("renders children when assistant:false matches a non-assistant message", async () => {
+      h.message.role = "user";
+      expect(await mount({ assistant: false })).not.toBeNull();
+    });
+  });
+
+  describe("running guard", () => {
+    it("renders children when an assistant message is running", async () => {
+      h.message.role = "assistant";
+      h.message.status = { type: "running" };
+      expect(await mount({ running: true })).not.toBeNull();
+    });
+
+    it("hides children when running:true but the assistant message is complete", async () => {
+      h.message.role = "assistant";
+      h.message.status = { type: "complete" };
+      expect(await mount({ running: true })).toBeNull();
+    });
+
+    it("treats a running user message as not running", async () => {
+      h.message.role = "user";
+      h.message.status = { type: "running" };
+      expect(await mount({ running: true })).toBeNull();
+      expect(await mount({ running: false })).not.toBeNull();
+    });
+  });
+
+  describe("last guard", () => {
+    it("renders children when last:true matches the last message", async () => {
+      h.message.isLast = true;
+      expect(await mount({ last: true })).not.toBeNull();
+    });
+
+    it("hides children when last:true but the message is not last", async () => {
+      h.message.isLast = false;
+      expect(await mount({ last: true })).toBeNull();
+    });
+
+    it("renders children when last:false matches a non-last message", async () => {
+      h.message.isLast = false;
+      expect(await mount({ last: false })).not.toBeNull();
+    });
+  });
+
+  describe("combined guards", () => {
+    it("renders children only when assistant and last both match", async () => {
+      h.message.role = "assistant";
+      h.message.isLast = true;
+      expect(await mount({ assistant: true, last: true })).not.toBeNull();
+    });
+
+    it("hides children when assistant matches but last does not", async () => {
+      h.message.role = "assistant";
+      h.message.isLast = false;
+      expect(await mount({ assistant: true, last: true })).toBeNull();
+    });
+
+    it("hides children when last matches but assistant does not", async () => {
+      h.message.role = "user";
+      h.message.isLast = true;
+      expect(await mount({ assistant: true, last: true })).toBeNull();
+    });
+  });
+});

package/src/primitives/suggestion/SuggestionDescription.test.tsx

@@ -0,0 +1,61 @@
+import { act } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { SuggestionDescription } from "./SuggestionDescription";
+
+const h = vi.hoisted(() => ({
+  suggestion: { label: "" as string | undefined },
+}));
+
+vi.mock("@assistant-ui/store", () => ({
+  useAuiState: <T,>(selector: (s: { suggestion: typeof h.suggestion }) => T) =>
+    selector({ suggestion: h.suggestion }),
+}));
+
+(globalThis as Record<string, unknown>).IS_REACT_ACT_ENVIRONMENT = true;
+
+describe("SuggestionDescription", () => {
+  let container: HTMLDivElement;
+  let root: Root;
+
+  beforeEach(() => {
+    h.suggestion.label = "";
+    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 SuggestionDescription>[0]> = {},
+  ) => {
+    await act(async () => {
+      root.render(<SuggestionDescription testID="t" {...props} />);
+    });
+    return container.querySelector('[data-testid="t"]') as HTMLElement;
+  };
+
+  it("renders the store suggestion label", async () => {
+    h.suggestion.label = "Generate a quick summary";
+    const el = await mount();
+    expect(el.textContent).toBe("Generate a quick summary");
+  });
+
+  it("renders explicit children over the store label", async () => {
+    h.suggestion.label = "Generate a quick summary";
+    const el = await mount({ children: "Custom label" });
+    expect(el.textContent).toBe("Custom label");
+  });
+
+  it("falls back to the store label when children is undefined", async () => {
+    h.suggestion.label = "Store label";
+    const el = await mount({ children: undefined });
+    expect(el.textContent).toBe("Store label");
+  });
+});

package/src/primitives/suggestion/SuggestionTitle.test.tsx

@@ -0,0 +1,61 @@
+import { act } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { SuggestionTitle } from "./SuggestionTitle";
+
+const h = vi.hoisted(() => ({
+  suggestion: { title: "" as string | undefined },
+}));
+
+vi.mock("@assistant-ui/store", () => ({
+  useAuiState: <T,>(selector: (s: { suggestion: typeof h.suggestion }) => T) =>
+    selector({ suggestion: h.suggestion }),
+}));
+
+(globalThis as Record<string, unknown>).IS_REACT_ACT_ENVIRONMENT = true;
+
+describe("SuggestionTitle", () => {
+  let container: HTMLDivElement;
+  let root: Root;
+
+  beforeEach(() => {
+    h.suggestion.title = "";
+    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 SuggestionTitle>[0]> = {},
+  ) => {
+    await act(async () => {
+      root.render(<SuggestionTitle testID="t" {...props} />);
+    });
+    return container.querySelector('[data-testid="t"]') as HTMLElement;
+  };
+
+  it("renders the store suggestion title", async () => {
+    h.suggestion.title = "Summarize this";
+    const el = await mount();
+    expect(el.textContent).toBe("Summarize this");
+  });
+
+  it("renders explicit children over the store title", async () => {
+    h.suggestion.title = "Summarize this";
+    const el = await mount({ children: "Custom title" });
+    expect(el.textContent).toBe("Custom title");
+  });
+
+  it("falls back to the store title when children is undefined", async () => {
+    h.suggestion.title = "Store title";
+    const el = await mount({ children: undefined });
+    expect(el.textContent).toBe("Store title");
+  });
+});

package/src/primitives/suggestion/SuggestionTrigger.test.tsx

@@ -0,0 +1,144 @@
+import { act } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { SuggestionTrigger } from "./SuggestionTrigger";
+
+const h = vi.hoisted(() => ({
+  trigger: vi.fn<() => void>(),
+  useSuggestionTrigger: vi.fn<
+    (arg: {
+      prompt: string | undefined;
+      send?: boolean;
+      clearComposer?: boolean;
+    }) => {
+      trigger: () => void;
+      disabled: boolean;
+    }
+  >(),
+  suggestion: { prompt: "" as string | undefined },
+}));
+
+vi.mock("@assistant-ui/store", () => ({
+  useAuiState: <T,>(selector: (s: { suggestion: typeof h.suggestion }) => T) =>
+    selector({ suggestion: h.suggestion }),
+}));
+
+vi.mock("@assistant-ui/core/react", () => ({
+  useSuggestionTrigger: (arg: Parameters<typeof h.useSuggestionTrigger>[0]) =>
+    h.useSuggestionTrigger(arg),
+}));
+
+(globalThis as Record<string, unknown>).IS_REACT_ACT_ENVIRONMENT = true;
+
+describe("SuggestionTrigger", () => {
+  let container: HTMLDivElement;
+  let root: Root;
+
+  beforeEach(() => {
+    h.trigger.mockReset();
+    h.suggestion.prompt = "Tell me a joke";
+    h.useSuggestionTrigger.mockReset();
+    h.useSuggestionTrigger.mockReturnValue({
+      trigger: h.trigger,
+      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 SuggestionTrigger>[0]> = {},
+  ) => {
+    await act(async () => {
+      root.render(
+        <SuggestionTrigger testID="t" {...props}>
+          {props.children ?? "Press me"}
+        </SuggestionTrigger>,
+      );
+    });
+    return container.querySelector('[data-testid="t"]') as HTMLElement;
+  };
+
+  const press = async (el: HTMLElement) => {
+    await act(async () => {
+      el.dispatchEvent(
+        new MouseEvent("click", { bubbles: true, cancelable: true }),
+      );
+    });
+  };
+
+  it("passes the store prompt and trigger options to useSuggestionTrigger", async () => {
+    h.suggestion.prompt = "Write a poem";
+    await mount({ send: true, clearComposer: false });
+
+    expect(h.useSuggestionTrigger).toHaveBeenCalledWith({
+      prompt: "Write a poem",
+      send: true,
+      clearComposer: false,
+    });
+  });
+
+  it("defaults clearComposer to true and leaves send undefined", async () => {
+    await mount();
+
+    expect(h.useSuggestionTrigger).toHaveBeenCalledWith({
+      prompt: "Tell me a joke",
+      send: undefined,
+      clearComposer: true,
+    });
+  });
+
+  it("fires the trigger when pressed", async () => {
+    const el = await mount();
+    await press(el);
+
+    expect(h.trigger).toHaveBeenCalledTimes(1);
+  });
+
+  it("renders its children", async () => {
+    const el = await mount({ children: "Suggested action" });
+    expect(el.textContent).toBe("Suggested action");
+  });
+
+  it("does not fire the trigger when the hook reports disabled", async () => {
+    h.useSuggestionTrigger.mockReturnValue({
+      trigger: h.trigger,
+      disabled: true,
+    });
+    const el = await mount();
+    await press(el);
+
+    expect(h.trigger).not.toHaveBeenCalled();
+  });
+
+  it("lets an explicit disabled prop override the hook's enabled state", async () => {
+    h.useSuggestionTrigger.mockReturnValue({
+      trigger: h.trigger,
+      disabled: false,
+    });
+    const el = await mount({ disabled: true });
+    await press(el);
+
+    expect(h.trigger).not.toHaveBeenCalled();
+  });
+
+  it("stays pressable when the prop disabled is false but the hook is disabled", async () => {
+    h.useSuggestionTrigger.mockReturnValue({
+      trigger: h.trigger,
+      disabled: true,
+    });
+    const el = await mount({ disabled: false });
+    await press(el);
+
+    expect(h.trigger).toHaveBeenCalledTimes(1);
+  });
+});