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

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

@@ -0,0 +1,351 @@
+/**
+ * @vitest-environment jsdom
+ */
+import { computed, shallowReactive } 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 { ComposerPrimitiveAttachmentDropzone } from "./ComposerAttachmentDropzone";
+
+const addAttachment = vi.fn<(file: File) => Promise<void>>();
+const threadCapabilities = { attachments: true };
+const threadState = shallowReactive({ isDisabled: false });
+
+vi.mock("@ulearning/ai-store", async (importOriginal) => {
+  const actual = await importOriginal<typeof import("@ulearning/ai-store")>();
+  return {
+    ...actual,
+    useAui: () => ({
+      composer: {
+        addAttachment,
+      },
+      thread: {
+        getState: () => ({ capabilities: threadCapabilities }),
+      },
+    }),
+    useAuiState: (
+      selector: (state: { thread: typeof threadState }) => unknown,
+    ) => computed(() => selector({ thread: threadState })),
+  };
+});
+
+const createDropEvent = (files: File[], types: string[] = ["Files"]) => {
+  const event = new Event("drop", { bubbles: true, cancelable: true });
+  Object.defineProperty(event, "dataTransfer", {
+    value: { files, types },
+    configurable: true,
+  });
+  return event;
+};
+
+const createDragEvent = (type: string, types: string[]) => {
+  const event = new Event(type, { bubbles: true, cancelable: true });
+  Object.defineProperty(event, "dataTransfer", {
+    value: { files: [], types },
+    configurable: true,
+  });
+  return event;
+};
+
+describe("ComposerPrimitiveAttachmentDropzone", () => {
+  let container: HTMLDivElement;
+  let root: Root;
+
+  beforeEach(async () => {
+    addAttachment.mockReset();
+    threadCapabilities.attachments = true;
+    threadState.isDisabled = false;
+    container = document.createElement("div");
+    document.body.appendChild(container);
+    root = createTestRoot(container);
+
+    await act(async () => {
+      root.render(
+        <ComposerPrimitiveAttachmentDropzone data-testid="dropzone">
+          <div>dropzone</div>
+        </ComposerPrimitiveAttachmentDropzone>,
+      );
+    });
+  });
+
+  afterEach(async () => {
+    await act(async () => {
+      root.unmount();
+    });
+    container.remove();
+    vi.restoreAllMocks();
+  });
+
+  it("composes a render element and keeps the drag props attached", async () => {
+    await act(async () => {
+      root.render(
+        <ComposerPrimitiveAttachmentDropzone
+          data-testid="dropzone"
+          render={<section class="child" />}
+          class="parent"
+        >
+          <div>outer</div>
+        </ComposerPrimitiveAttachmentDropzone>,
+      );
+    });
+
+    const dropzone = container.querySelector(
+      "section[data-testid='dropzone']",
+    ) as HTMLElement;
+    expect(dropzone).not.toBeNull();
+    expect(dropzone.textContent).toBe("outer");
+    expect(dropzone.className).toContain("parent");
+    expect(dropzone.className).toContain("child");
+
+    await act(async () => {
+      dropzone.dispatchEvent(createDragEvent("dragenter", ["Files"]));
+    });
+
+    expect(dropzone.getAttribute("data-dragging")).toBe("true");
+  });
+
+  it("falls back to the render element's own children", async () => {
+    await act(async () => {
+      root.render(
+        <ComposerPrimitiveAttachmentDropzone
+          data-testid="dropzone"
+          render={<section>fallback</section>}
+        />,
+      );
+    });
+
+    expect(
+      container.querySelector("section[data-testid='dropzone']")?.textContent,
+    ).toBe("fallback");
+  });
+
+  it("starts all dropped attachments before awaiting completion", async () => {
+    const resolvers: Array<() => void> = [];
+    addAttachment.mockImplementation(
+      () =>
+        new Promise<void>((resolve) => {
+          resolvers.push(resolve);
+        }),
+    );
+
+    const dropzone = container.querySelector("[data-testid='dropzone']");
+    expect(dropzone).not.toBeNull();
+
+    const files = [
+      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 act(async () => {
+      dropzone!.dispatchEvent(createDropEvent(files));
+      await Promise.resolve();
+    });
+
+    expect(addAttachment).toHaveBeenCalledTimes(3);
+    expect(addAttachment.mock.calls.map(([file]) => file.name)).toEqual([
+      "first.txt",
+      "second.txt",
+      "third.txt",
+    ]);
+
+    for (const resolve of resolvers) resolve();
+
+    await act(async () => {
+      await Promise.resolve();
+    });
+  });
+
+  it("continues processing other files when one attachment fails without console.error", async () => {
+    const error = new Error("upload failed");
+    const errorSpy = vi.spyOn(console, "error").mockImplementation(() => {});
+
+    addAttachment
+      .mockRejectedValueOnce(error)
+      .mockResolvedValueOnce(undefined)
+      .mockResolvedValueOnce(undefined);
+
+    const dropzone = container.querySelector("[data-testid='dropzone']");
+    expect(dropzone).not.toBeNull();
+
+    const files = [
+      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 act(async () => {
+      dropzone!.dispatchEvent(createDropEvent(files));
+      await Promise.resolve();
+      await Promise.resolve();
+    });
+
+    expect(addAttachment).toHaveBeenCalledTimes(3);
+    expect(errorSpy).not.toHaveBeenCalled();
+    errorSpy.mockRestore();
+  });
+
+  it("highlights on file drags", async () => {
+    const dropzone = container.querySelector("[data-testid='dropzone']");
+    expect(dropzone).not.toBeNull();
+
+    const event = createDragEvent("dragenter", ["Files"]);
+    await act(async () => {
+      dropzone!.dispatchEvent(event);
+    });
+
+    expect(dropzone!.getAttribute("data-dragging")).toBe("true");
+    expect(event.defaultPrevented).toBe(true);
+  });
+
+  it("clears the drag highlight when disabled during a drag", async () => {
+    const dropzone = container.querySelector("[data-testid='dropzone']");
+    expect(dropzone).not.toBeNull();
+
+    await act(async () => {
+      dropzone!.dispatchEvent(createDragEvent("dragenter", ["Files"]));
+    });
+    expect(dropzone!.getAttribute("data-dragging")).toBe("true");
+
+    await act(async () => {
+      root.render(
+        <ComposerPrimitiveAttachmentDropzone data-testid="dropzone" disabled />,
+      );
+    });
+
+    expect(dropzone!.hasAttribute("data-dragging")).toBe(false);
+
+    await act(async () => {
+      root.render(
+        <ComposerPrimitiveAttachmentDropzone data-testid="dropzone" />,
+      );
+    });
+
+    expect(dropzone!.hasAttribute("data-dragging")).toBe(false);
+
+    await act(async () => {
+      dropzone!.dispatchEvent(createDragEvent("dragenter", ["Files"]));
+    });
+    expect(dropzone!.getAttribute("data-dragging")).toBe("true");
+  });
+
+  it("prevents a disabled file drop from navigating away without adding attachments", async () => {
+    await act(async () => {
+      root.render(
+        <ComposerPrimitiveAttachmentDropzone data-testid="dropzone" disabled />,
+      );
+    });
+    const dropzone = container.querySelector("[data-testid='dropzone']")!;
+    const over = createDragEvent("dragover", ["Files"]);
+    const drop = createDropEvent([
+      new File(["file"], "photo.png", { type: "image/png" }),
+    ]);
+
+    await act(async () => {
+      dropzone.dispatchEvent(over);
+      dropzone.dispatchEvent(drop);
+    });
+
+    expect(over.defaultPrevented).toBe(true);
+    expect(drop.defaultPrevented).toBe(true);
+    expect(addAttachment).not.toHaveBeenCalled();
+    expect(dropzone.hasAttribute("data-dragging")).toBe(false);
+  });
+
+  it("blocks file drops when the thread is disabled", async () => {
+    threadState.isDisabled = true;
+    await act(async () => {
+      root.render(
+        <ComposerPrimitiveAttachmentDropzone data-testid="dropzone">
+          <div>dropzone</div>
+        </ComposerPrimitiveAttachmentDropzone>,
+      );
+    });
+    const dropzone = container.querySelector("[data-testid='dropzone']")!;
+    const over = createDragEvent("dragover", ["Files"]);
+    const drop = createDropEvent([
+      new File(["file"], "photo.png", { type: "image/png" }),
+    ]);
+
+    await act(async () => {
+      dropzone.dispatchEvent(over);
+      dropzone.dispatchEvent(drop);
+    });
+
+    expect(over.defaultPrevented).toBe(true);
+    expect(drop.defaultPrevented).toBe(true);
+    expect(addAttachment).not.toHaveBeenCalled();
+    expect(dropzone.hasAttribute("data-dragging")).toBe(false);
+  });
+
+  it("ignores non-file drags", async () => {
+    const dropzone = container.querySelector("[data-testid='dropzone']");
+    expect(dropzone).not.toBeNull();
+
+    const enter = createDragEvent("dragenter", ["text/plain"]);
+    const over = createDragEvent("dragover", ["text/plain"]);
+    await act(async () => {
+      dropzone!.dispatchEvent(enter);
+      dropzone!.dispatchEvent(over);
+    });
+
+    expect(dropzone!.hasAttribute("data-dragging")).toBe(false);
+    expect(enter.defaultPrevented).toBe(false);
+    expect(over.defaultPrevented).toBe(false);
+  });
+
+  it("claims file drags without highlighting when the runtime does not support attachments", async () => {
+    threadCapabilities.attachments = false;
+    const dropzone = container.querySelector("[data-testid='dropzone']");
+    expect(dropzone).not.toBeNull();
+
+    const enter = createDragEvent("dragenter", ["Files"]);
+    const drop = createDropEvent([
+      new File(["a"], "first.txt", { type: "text/plain" }),
+    ]);
+    await act(async () => {
+      dropzone!.dispatchEvent(enter);
+      dropzone!.dispatchEvent(drop);
+    });
+
+    expect(dropzone!.hasAttribute("data-dragging")).toBe(false);
+    expect(enter.defaultPrevented).toBe(true);
+    expect((enter as unknown as DragEvent).dataTransfer!.dropEffect).toBe(
+      "none",
+    );
+    expect(drop.defaultPrevented).toBe(true);
+    expect(addAttachment).not.toHaveBeenCalled();
+  });
+
+  it("clears the highlight and keeps a file drop claimed when it yields no files", async () => {
+    const dropzone = container.querySelector("[data-testid='dropzone']");
+    expect(dropzone).not.toBeNull();
+
+    await act(async () => {
+      dropzone!.dispatchEvent(createDragEvent("dragenter", ["Files"]));
+    });
+    expect(dropzone!.getAttribute("data-dragging")).toBe("true");
+
+    const drop = createDropEvent([], ["Files"]);
+    await act(async () => {
+      dropzone!.dispatchEvent(drop);
+    });
+
+    expect(dropzone!.hasAttribute("data-dragging")).toBe(false);
+    expect(drop.defaultPrevented).toBe(true);
+    expect(addAttachment).not.toHaveBeenCalled();
+  });
+
+  it("lets non-file drops pass through", async () => {
+    const dropzone = container.querySelector("[data-testid='dropzone']");
+    expect(dropzone).not.toBeNull();
+
+    const drop = createDropEvent([], []);
+    await act(async () => {
+      dropzone!.dispatchEvent(drop);
+    });
+
+    expect(drop.defaultPrevented).toBe(false);
+    expect(addAttachment).not.toHaveBeenCalled();
+  });
+});

package/src/primitives/composer/ComposerAttachmentDropzone.tsx

@@ -0,0 +1,109 @@
+"use client";
+import {
+  computed,
+  defineComponent,
+  h,
+  mergeProps,
+  shallowRef,
+  watch,
+  type ComponentPublicInstance,
+} from "vue";
+import { useForwardExpose } from "reka-ui";
+import { useAui, useAuiState } from "@ulearning/ai-store";
+import { Primitive, type PrimitiveProps } from "../../utils/Primitive";
+
+export namespace ComposerPrimitiveAttachmentDropzone {
+  export type Element = ComponentPublicInstance;
+  export type Props = PrimitiveProps<"div"> & {
+    disabled?: boolean | undefined;
+  };
+}
+export const ComposerPrimitiveAttachmentDropzone =
+  defineComponent<ComposerPrimitiveAttachmentDropzone.Props>(
+    (props, { attrs, slots }) => {
+      const { forwardRef } = useForwardExpose();
+      const aui = useAui();
+      const dragging = shallowRef(false);
+      const disabledByThread = useAuiState((s) => s.thread.isDisabled);
+      const disabled = computed(
+        () => !!props.disabled || disabledByThread.value,
+      );
+      watch(
+        disabled,
+        (value) => {
+          if (value) dragging.value = false;
+        },
+        { flush: "sync" },
+      );
+      const enter = (event: DragEvent) => {
+        if (
+          event.defaultPrevented ||
+          !event.dataTransfer?.types.includes("Files")
+        )
+          return;
+        // Claim file drops even when unsupported, preventing navigation to a file.
+        event.preventDefault();
+        if (disabled.value || !aui.thread.getState().capabilities.attachments) {
+          event.dataTransfer.dropEffect = "none";
+          return;
+        }
+        dragging.value = true;
+      };
+      const leave = (event: DragEvent) => {
+        if (event.defaultPrevented || disabled.value) return;
+        event.preventDefault();
+        const target = event.currentTarget;
+        if (
+          target instanceof Node &&
+          event.relatedTarget instanceof Node &&
+          target.contains(event.relatedTarget)
+        )
+          return;
+        dragging.value = false;
+      };
+      const drop = async (event: DragEvent) => {
+        if (event.defaultPrevented) return;
+        dragging.value = false;
+        if (!event.dataTransfer?.types.includes("Files")) return;
+        event.preventDefault();
+        if (disabled.value || !aui.thread.getState().capabilities.attachments)
+          return;
+        await Promise.all(
+          Array.from(event.dataTransfer.files).map(async (file) => {
+            try {
+              await aui.composer.addAttachment(file);
+            } catch {
+              /* The runtime emits composer.attachmentAddError before rejecting. */
+            }
+          }),
+        );
+      };
+      return () =>
+        h(
+          Primitive.div,
+          mergeProps(
+            {
+              "data-dragging":
+                dragging.value && !disabled.value ? "true" : undefined,
+            },
+            attrs,
+            {
+              render: props.render,
+              asChild: props.asChild,
+              children: props.children,
+              ref: forwardRef,
+              onDragenterCapture: enter,
+              onDragoverCapture: enter,
+              onDragleaveCapture: leave,
+              onDropCapture: drop,
+            },
+          ),
+          slots,
+        );
+    },
+    {
+      name: "ComposerPrimitive.AttachmentDropzone",
+      inheritAttrs: false,
+      props: ["render", "asChild", "children", "disabled"],
+    },
+  );

package/src/primitives/composer/ComposerAttachments.tsx

@@ -0,0 +1,6 @@
+"use client";
+
+export {
+  ComposerPrimitiveAttachments,
+  ComposerPrimitiveAttachmentByIndex,
+} from "@ulearning/ai-core/vue";