@ulearning/ai-sdk 0.0.0-stage → 1.0.0-next.0

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

@@ -0,0 +1,712 @@
+/**
+ * @vitest-environment jsdom
+ */
+import { computed, shallowReactive, shallowRef } from "vue";
+import { actAsync as act, createTestRoot } from "../../tests/vue";
+type Root = ReturnType<typeof createTestRoot>;
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { ComposerPrimitiveInput } from "./ComposerInput";
+
+const setText = vi.fn<(text: string) => void>();
+const setCursorPosition = vi.fn<(pos: number) => void>();
+const sendSpy = vi.fn<(options?: { steer?: boolean }) => void>();
+const addAttachment = vi.fn<(file: File) => Promise<void>>();
+const cancelSpy = vi.fn<() => void>();
+
+const composerState = shallowReactive({
+  isEditing: true,
+  text: "",
+  type: "thread" as const,
+  isEmpty: true,
+  canCancel: false,
+  canSend: true,
+  dictation: undefined as undefined | { inputDisabled: boolean },
+});
+
+const threadState = shallowReactive({
+  isDisabled: false,
+  isRunning: false,
+  capabilities: { queue: false, attachments: false },
+  voice: undefined as undefined | { status: { type: "running" } },
+});
+
+const plugin = {
+  handleKeyDown: () => false,
+  setCursorPosition,
+};
+
+let pluginRegistry: { getPlugins: () => (typeof plugin)[] } | null = null;
+
+vi.mock("@ulearning/ai-store", async (importOriginal) => {
+  const original = await importOriginal<typeof import("@ulearning/ai-store")>();
+  const aui = {
+    optional: { threads: {} },
+    composer: {
+      setText: (text: string) => setText(text),
+      getState: () => composerState,
+      cancel: () => cancelSpy(),
+      send: (options?: { steer?: boolean }) => sendSpy(options),
+      addAttachment: (file: File) => addAttachment(file),
+    },
+    thread: {
+      getState: () => threadState,
+    },
+    on: () => () => {},
+  };
+  type Selector<T> = (s: {
+    composer: typeof composerState;
+    thread: typeof threadState;
+  }) => T;
+  return {
+    ...original,
+    useAui: () => aui,
+    useAuiState: <T,>(selector: Selector<T>) =>
+      computed(() =>
+        selector({ composer: composerState, thread: threadState }),
+      ),
+  };
+});
+
+vi.mock("./ComposerInputPluginContext", () => ({
+  useComposerInputPluginRegistryOptional: () => pluginRegistry,
+}));
+
+const activeAria = shallowRef<{
+  popoverId: string;
+  highlightedItemId: string | undefined;
+} | null>(null);
+
+vi.mock("./trigger/TriggerPopoverRootContext", () => ({
+  useTriggerPopoverActiveAriaOptional: () => activeAria,
+}));
+
+vi.mock("../../utils/hooks/useOnScrollToBottom", () => ({
+  useOnScrollToBottom: () => {},
+}));
+
+const setNativeValue = (textarea: HTMLTextAreaElement, value: string) => {
+  const setter = Object.getOwnPropertyDescriptor(
+    HTMLTextAreaElement.prototype,
+    "value",
+  )?.set;
+  setter?.call(textarea, value);
+};
+
+const fireInput = (
+  textarea: HTMLTextAreaElement,
+  value: string,
+  isComposing: boolean,
+) => {
+  setNativeValue(textarea, value);
+  textarea.dispatchEvent(
+    new InputEvent("input", { bubbles: true, isComposing }),
+  );
+};
+
+const fireCompositionStart = (textarea: HTMLTextAreaElement) => {
+  textarea.dispatchEvent(
+    new CompositionEvent("compositionstart", { bubbles: true }),
+  );
+};
+
+const fireCompositionEnd = (textarea: HTMLTextAreaElement, value: string) => {
+  setNativeValue(textarea, value);
+  textarea.dispatchEvent(
+    new CompositionEvent("compositionend", { bubbles: true }),
+  );
+};
+
+const fireKeyDown = (
+  textarea: HTMLTextAreaElement,
+  opts: {
+    key?: string;
+    shiftKey?: boolean;
+    ctrlKey?: boolean;
+    metaKey?: boolean;
+    isComposing?: boolean;
+    keyCode?: number;
+  } = {},
+): KeyboardEvent => {
+  const event = new KeyboardEvent("keydown", {
+    bubbles: true,
+    cancelable: true,
+    key: opts.key ?? "Enter",
+    shiftKey: opts.shiftKey ?? false,
+    ctrlKey: opts.ctrlKey ?? false,
+    metaKey: opts.metaKey ?? false,
+    isComposing: opts.isComposing ?? false,
+    keyCode: opts.keyCode ?? 0,
+  });
+  textarea.dispatchEvent(event);
+  return event;
+};
+
+const firePaste = (textarea: HTMLTextAreaElement, files: File[]) => {
+  const event = new Event("paste", { bubbles: true, cancelable: true });
+  Object.defineProperty(event, "clipboardData", {
+    value: { files },
+    configurable: true,
+  });
+  textarea.dispatchEvent(event);
+  return event;
+};
+
+const setMatchMedia = (matches: boolean) => {
+  Object.defineProperty(window, "matchMedia", {
+    writable: true,
+    configurable: true,
+    value: (query: string) => ({
+      matches,
+      media: query,
+      onchange: null,
+      addEventListener: () => {},
+      removeEventListener: () => {},
+      addListener: () => {},
+      removeListener: () => {},
+      dispatchEvent: () => false,
+    }),
+  });
+};
+
+describe("ComposerPrimitiveInput", () => {
+  let container: HTMLDivElement;
+  let root: Root;
+  let requestSubmitSpy: ReturnType<
+    typeof vi.fn<(submitter?: HTMLElement | null) => void>
+  >;
+  let originalRequestSubmit: HTMLFormElement["requestSubmit"] | undefined;
+
+  beforeEach(() => {
+    setText.mockReset();
+    setCursorPosition.mockReset();
+    sendSpy.mockReset();
+    addAttachment.mockReset();
+    cancelSpy.mockReset();
+    composerState.isEditing = true;
+    composerState.text = "";
+    composerState.isEmpty = true;
+    composerState.canSend = true;
+    composerState.dictation = undefined;
+    composerState.canCancel = false;
+    threadState.isDisabled = false;
+    threadState.isRunning = false;
+    threadState.capabilities = { queue: false, attachments: false };
+    threadState.voice = undefined;
+    pluginRegistry = null;
+    activeAria.value = null;
+    setMatchMedia(false);
+
+    requestSubmitSpy = vi.fn<(submitter?: HTMLElement | null) => void>();
+    originalRequestSubmit = HTMLFormElement.prototype.requestSubmit;
+    HTMLFormElement.prototype.requestSubmit = requestSubmitSpy;
+
+    container = document.createElement("div");
+    document.body.appendChild(container);
+    root = createTestRoot(container);
+  });
+
+  afterEach(async () => {
+    await act(async () => {
+      root.unmount();
+    });
+    container.remove();
+    if (originalRequestSubmit) {
+      HTMLFormElement.prototype.requestSubmit = originalRequestSubmit;
+    } else {
+      delete (HTMLFormElement.prototype as Partial<HTMLFormElement>)
+        .requestSubmit;
+    }
+    vi.restoreAllMocks();
+  });
+
+  const mount = async (props: Partial<ComposerPrimitiveInput.Props> = {}) => {
+    await act(async () => {
+      root.render(
+        <form>
+          <ComposerPrimitiveInput data-testid="input" {...props} />
+        </form>,
+      );
+    });
+    const textarea = container.querySelector("textarea") as HTMLTextAreaElement;
+    expect(textarea).not.toBeNull();
+    return textarea;
+  };
+
+  it("composes a render element with the computed input props", async () => {
+    await act(async () => {
+      root.render(
+        <form>
+          <ComposerPrimitiveInput
+            render={<textarea data-testid="custom" class="child" />}
+            class="parent"
+          />
+        </form>,
+      );
+    });
+
+    const textarea = container.querySelector(
+      "textarea[data-testid='custom']",
+    ) as HTMLTextAreaElement;
+    expect(textarea).not.toBeNull();
+    expect(textarea.className).toContain("parent");
+    expect(textarea.className).toContain("child");
+    expect(textarea.name).toBe("input");
+    expect(textarea.hasAttribute("render")).toBe(false);
+  });
+
+  it("syncs setText during active composition without resetting the controlled textarea", async () => {
+    const textarea = await mount();
+
+    await act(async () => {
+      fireCompositionStart(textarea);
+      fireInput(textarea, "ㄱ", true);
+    });
+    expect(setText).toHaveBeenCalledWith("ㄱ");
+
+    await act(async () => {
+      fireInput(textarea, "가", true);
+    });
+    expect(setText).toHaveBeenLastCalledWith("가");
+  });
+
+  it("commits the final value on compositionend", async () => {
+    const textarea = await mount();
+
+    await act(async () => {
+      fireCompositionStart(textarea);
+      fireInput(textarea, "가", true);
+    });
+    expect(setText).toHaveBeenCalledTimes(1);
+
+    await act(async () => {
+      fireCompositionEnd(textarea, "가");
+    });
+    expect(setText).toHaveBeenCalledTimes(2);
+    expect(setText).toHaveBeenLastCalledWith("가");
+  });
+
+  it("recovers when compositionend is dropped before the next input", async () => {
+    const textarea = await mount();
+
+    await act(async () => {
+      fireCompositionStart(textarea);
+      fireInput(textarea, "hello", false);
+    });
+    expect(setText).toHaveBeenCalledWith("hello");
+
+    await act(async () => {
+      fireInput(textarea, "hello!", false);
+    });
+    expect(setText).toHaveBeenLastCalledWith("hello!");
+  });
+
+  it("skips plugin cursor tracking during composition but resumes after", async () => {
+    pluginRegistry = { getPlugins: () => [plugin] };
+    const textarea = await mount();
+
+    await act(async () => {
+      fireCompositionStart(textarea);
+      fireInput(textarea, "ㄱ", true);
+    });
+    expect(setText).toHaveBeenCalledWith("ㄱ");
+    expect(setCursorPosition).not.toHaveBeenCalled();
+
+    await act(async () => {
+      fireCompositionEnd(textarea, "가");
+    });
+    expect(setCursorPosition).toHaveBeenCalled();
+  });
+
+  it("tracks plugin cursor for non-composition input", async () => {
+    pluginRegistry = { getPlugins: () => [plugin] };
+    const textarea = await mount();
+
+    await act(async () => {
+      fireInput(textarea, "abc", false);
+    });
+    expect(setText).toHaveBeenCalledWith("abc");
+    expect(setCursorPosition).toHaveBeenCalled();
+  });
+
+  it("ignores input and compositionend when the composer is not editing", async () => {
+    composerState.isEditing = false;
+    const textarea = await mount();
+
+    await act(async () => {
+      fireInput(textarea, "abc", false);
+      fireCompositionStart(textarea);
+      fireCompositionEnd(textarea, "가");
+    });
+    expect(setText).not.toHaveBeenCalled();
+  });
+
+  it("does not apply ARIA combobox attributes when no trigger popover is open", async () => {
+    activeAria.value = null;
+    const textarea = await mount();
+
+    expect(textarea.getAttribute("aria-controls")).toBeNull();
+    expect(textarea.getAttribute("aria-expanded")).toBeNull();
+    expect(textarea.getAttribute("aria-haspopup")).toBeNull();
+    expect(textarea.getAttribute("aria-activedescendant")).toBeNull();
+  });
+
+  it("applies ARIA combobox attributes when a trigger popover is open", async () => {
+    activeAria.value = {
+      popoverId: "popover-1",
+      highlightedItemId: "popover-1-option-foo",
+    };
+    const textarea = await mount();
+
+    expect(textarea.getAttribute("aria-controls")).toBe("popover-1");
+    expect(textarea.getAttribute("aria-expanded")).toBe("true");
+    expect(textarea.getAttribute("aria-haspopup")).toBe("listbox");
+    expect(textarea.getAttribute("aria-activedescendant")).toBe(
+      "popover-1-option-foo",
+    );
+  });
+
+  it("omits aria-activedescendant when no item is highlighted", async () => {
+    activeAria.value = {
+      popoverId: "popover-1",
+      highlightedItemId: undefined,
+    };
+    const textarea = await mount();
+
+    expect(textarea.getAttribute("aria-controls")).toBe("popover-1");
+    expect(textarea.getAttribute("aria-expanded")).toBe("true");
+    expect(textarea.getAttribute("aria-haspopup")).toBe("listbox");
+    expect(textarea.getAttribute("aria-activedescendant")).toBeNull();
+  });
+
+  describe("submit behavior", () => {
+    it("submits on plain Enter under the default submitMode", async () => {
+      const textarea = await mount();
+
+      let event!: KeyboardEvent;
+      await act(async () => {
+        event = fireKeyDown(textarea, { key: "Enter" });
+      });
+
+      expect(requestSubmitSpy).toHaveBeenCalledTimes(1);
+      expect(event.defaultPrevented).toBe(true);
+    });
+
+    it("blocks Enter while a run is in progress without a queue, except during a voice session", async () => {
+      threadState.isRunning = true;
+      const textarea = await mount();
+
+      await act(async () => {
+        fireKeyDown(textarea, { key: "Enter" });
+      });
+      expect(requestSubmitSpy).not.toHaveBeenCalled();
+
+      threadState.voice = { status: { type: "running" } };
+      await act(async () => {
+        fireKeyDown(textarea, { key: "Enter" });
+      });
+      expect(requestSubmitSpy).toHaveBeenCalledTimes(1);
+    });
+
+    it("inserts a newline on Shift+Enter without submitting", async () => {
+      const textarea = await mount();
+
+      let event!: KeyboardEvent;
+      await act(async () => {
+        event = fireKeyDown(textarea, { key: "Enter", shiftKey: true });
+      });
+
+      expect(requestSubmitSpy).not.toHaveBeenCalled();
+      expect(event.defaultPrevented).toBe(false);
+    });
+
+    it("ignores Enter while an IME composition is active", async () => {
+      const textarea = await mount();
+
+      let event!: KeyboardEvent;
+      await act(async () => {
+        event = fireKeyDown(textarea, { key: "Enter", isComposing: true });
+      });
+
+      expect(requestSubmitSpy).not.toHaveBeenCalled();
+      expect(event.defaultPrevented).toBe(false);
+    });
+
+    it("ignores the Enter that commits an IME composition after compositionend (Safari)", async () => {
+      const textarea = await mount();
+
+      let event!: KeyboardEvent;
+      await act(async () => {
+        fireCompositionStart(textarea);
+        fireCompositionEnd(textarea, "日本語");
+        event = fireKeyDown(textarea, { key: "Enter", keyCode: 229 });
+      });
+
+      expect(requestSubmitSpy).not.toHaveBeenCalled();
+      expect(event.defaultPrevented).toBe(false);
+    });
+
+    it("submitMode='ctrlEnter' submits on Cmd/Ctrl+Enter but not on plain Enter", async () => {
+      const textarea = await mount({ submitMode: "ctrlEnter" });
+
+      let plain!: KeyboardEvent;
+      await act(async () => {
+        plain = fireKeyDown(textarea, { key: "Enter" });
+      });
+      expect(requestSubmitSpy).not.toHaveBeenCalled();
+      expect(plain.defaultPrevented).toBe(false);
+
+      let withMeta!: KeyboardEvent;
+      await act(async () => {
+        withMeta = fireKeyDown(textarea, { key: "Enter", metaKey: true });
+      });
+      expect(requestSubmitSpy).toHaveBeenCalledTimes(1);
+      expect(withMeta.defaultPrevented).toBe(true);
+
+      let withCtrl!: KeyboardEvent;
+      await act(async () => {
+        withCtrl = fireKeyDown(textarea, { key: "Enter", ctrlKey: true });
+      });
+      expect(requestSubmitSpy).toHaveBeenCalledTimes(2);
+      expect(withCtrl.defaultPrevented).toBe(true);
+    });
+
+    it("submitMode='none' leaves Enter to insert a native newline", async () => {
+      const textarea = await mount({ submitMode: "none" });
+
+      let event!: KeyboardEvent;
+      await act(async () => {
+        event = fireKeyDown(textarea, { key: "Enter" });
+      });
+
+      expect(requestSubmitSpy).not.toHaveBeenCalled();
+      expect(event.defaultPrevented).toBe(false);
+    });
+
+    it("unstable_insertNewlineOnTouchEnter downgrades Enter on touch-primary devices", async () => {
+      setMatchMedia(true);
+      const textarea = await mount({
+        unstable_insertNewlineOnTouchEnter: true,
+      });
+
+      let event!: KeyboardEvent;
+      await act(async () => {
+        event = fireKeyDown(textarea, { key: "Enter" });
+      });
+
+      expect(requestSubmitSpy).not.toHaveBeenCalled();
+      expect(event.defaultPrevented).toBe(false);
+    });
+
+    it("unstable_insertNewlineOnTouchEnter is a no-op on desktop", async () => {
+      setMatchMedia(false);
+      const textarea = await mount({
+        unstable_insertNewlineOnTouchEnter: true,
+      });
+
+      let event!: KeyboardEvent;
+      await act(async () => {
+        event = fireKeyDown(textarea, { key: "Enter" });
+      });
+
+      expect(requestSubmitSpy).toHaveBeenCalledTimes(1);
+      expect(event.defaultPrevented).toBe(true);
+    });
+
+    it("unstable_insertNewlineOnTouchEnter does not override submitMode='ctrlEnter'", async () => {
+      setMatchMedia(true);
+      const textarea = await mount({
+        submitMode: "ctrlEnter",
+        unstable_insertNewlineOnTouchEnter: true,
+      });
+
+      let event!: KeyboardEvent;
+      await act(async () => {
+        event = fireKeyDown(textarea, { key: "Enter", metaKey: true });
+      });
+
+      expect(requestSubmitSpy).toHaveBeenCalledTimes(1);
+      expect(event.defaultPrevented).toBe(true);
+    });
+
+    it("unstable_insertNewlineOnTouchEnter does not override submitMode='none'", async () => {
+      setMatchMedia(true);
+      const textarea = await mount({
+        submitMode: "none",
+        unstable_insertNewlineOnTouchEnter: true,
+      });
+
+      let event!: KeyboardEvent;
+      await act(async () => {
+        event = fireKeyDown(textarea, { key: "Enter" });
+      });
+
+      expect(requestSubmitSpy).not.toHaveBeenCalled();
+      expect(event.defaultPrevented).toBe(false);
+    });
+
+    it("preserves steer (Cmd+Shift+Enter) on touch when unstable_insertNewlineOnTouchEnter is set", async () => {
+      setMatchMedia(true);
+      threadState.capabilities = { queue: true, attachments: false };
+      const textarea = await mount({
+        unstable_insertNewlineOnTouchEnter: true,
+      });
+
+      let event!: KeyboardEvent;
+      await act(async () => {
+        event = fireKeyDown(textarea, {
+          key: "Enter",
+          metaKey: true,
+          shiftKey: true,
+        });
+      });
+
+      expect(sendSpy).toHaveBeenCalledTimes(1);
+      expect(sendSpy).toHaveBeenCalledWith({ steer: true });
+      expect(requestSubmitSpy).not.toHaveBeenCalled();
+      expect(event.defaultPrevented).toBe(true);
+    });
+  });
+
+  describe("escape behavior", () => {
+    const fireEscape = (
+      textarea: HTMLTextAreaElement,
+      opts: { isComposing?: boolean; keyCode?: number } = {},
+    ): KeyboardEvent => {
+      const event = new KeyboardEvent("keydown", {
+        bubbles: true,
+        cancelable: true,
+        key: "Escape",
+        isComposing: opts.isComposing ?? false,
+        keyCode: opts.keyCode ?? 0,
+      });
+      textarea.dispatchEvent(event);
+      return event;
+    };
+
+    it("cancels the composer on Escape when cancellable", async () => {
+      composerState.canCancel = true;
+      const textarea = await mount();
+
+      let event!: KeyboardEvent;
+      await act(async () => {
+        event = fireEscape(textarea);
+      });
+
+      expect(cancelSpy).toHaveBeenCalledTimes(1);
+      expect(event.defaultPrevented).toBe(true);
+    });
+
+    it("ignores Escape while an IME composition is active", async () => {
+      composerState.canCancel = true;
+      const textarea = await mount();
+
+      let event!: KeyboardEvent;
+      await act(async () => {
+        event = fireEscape(textarea, { isComposing: true });
+      });
+
+      expect(cancelSpy).not.toHaveBeenCalled();
+      expect(event.defaultPrevented).toBe(false);
+    });
+
+    it("ignores the Escape that cancels an IME composition after compositionend (Safari)", async () => {
+      composerState.canCancel = true;
+      const textarea = await mount();
+
+      let event!: KeyboardEvent;
+      await act(async () => {
+        fireCompositionStart(textarea);
+        fireCompositionEnd(textarea, "");
+        event = fireEscape(textarea, { keyCode: 229 });
+      });
+
+      expect(cancelSpy).not.toHaveBeenCalled();
+      expect(event.defaultPrevented).toBe(false);
+    });
+  });
+
+  describe("paste attachments", () => {
+    it("attempts every pasted file and prevents default when attachments are supported", async () => {
+      threadState.capabilities = { queue: false, attachments: true };
+
+      const textarea = await mount();
+
+      let event!: Event;
+      await act(async () => {
+        event = firePaste(textarea, [
+          new File(["a"], "first.txt", { type: "text/plain" }),
+          new File(["b"], "second.txt", { type: "text/plain" }),
+          new File(["c"], "third.txt", { type: "text/plain" }),
+        ]);
+        await Promise.resolve();
+        await Promise.resolve();
+      });
+
+      expect(addAttachment).toHaveBeenCalledTimes(3);
+      expect(addAttachment.mock.calls.map(([file]) => file.name)).toEqual([
+        "first.txt",
+        "second.txt",
+        "third.txt",
+      ]);
+      expect(event.defaultPrevented).toBe(true);
+    });
+
+    it("continues processing other files when one attachment fails without console.error", async () => {
+      threadState.capabilities = { queue: false, attachments: true };
+      const errorSpy = vi.spyOn(console, "error").mockImplementation(() => {});
+
+      addAttachment
+        .mockRejectedValueOnce(new Error("upload failed"))
+        .mockResolvedValueOnce(undefined)
+        .mockResolvedValueOnce(undefined);
+
+      const textarea = await mount();
+
+      await act(async () => {
+        firePaste(textarea, [
+          new File(["a"], "first.txt", { type: "text/plain" }),
+          new File(["b"], "second.txt", { type: "text/plain" }),
+          new File(["c"], "third.txt", { type: "text/plain" }),
+        ]);
+        await Promise.resolve();
+        await Promise.resolve();
+      });
+
+      expect(addAttachment).toHaveBeenCalledTimes(3);
+      expect(errorSpy).not.toHaveBeenCalled();
+      errorSpy.mockRestore();
+    });
+
+    it("does not add attachments on paste when attachments are unsupported", async () => {
+      threadState.capabilities = { queue: false, attachments: false };
+
+      const textarea = await mount();
+
+      let event!: Event;
+      await act(async () => {
+        event = firePaste(textarea, [
+          new File(["a"], "first.txt", { type: "text/plain" }),
+        ]);
+        await Promise.resolve();
+      });
+
+      expect(addAttachment).not.toHaveBeenCalled();
+      expect(event.defaultPrevented).toBe(false);
+    });
+
+    it("skips attachment handling when addAttachmentOnPaste is false", async () => {
+      threadState.capabilities = { queue: false, attachments: true };
+
+      const textarea = await mount({ addAttachmentOnPaste: false });
+
+      await act(async () => {
+        firePaste(textarea, [
+          new File(["a"], "first.txt", { type: "text/plain" }),
+        ]);
+        await Promise.resolve();
+      });
+
+      expect(addAttachment).not.toHaveBeenCalled();
+    });
+  });
+});