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

package/src/primitives/native-display-bindings.test.ts

@@ -0,0 +1,159 @@
+// @vitest-environment jsdom
+import { defineComponent, h, nextTick, shallowRef } from "vue";
+import { afterEach, expect, it } from "vitest";
+import { flushTapSync } from "@ulearning/ai-tap";
+import { cleanup } from "../tests/vue";
+import { mountMessageAction } from "../tests/messageAction";
+import { ActionBarPrimitiveRoot } from "./actionBar/ActionBarRoot";
+import { useActionBarInteractionContext } from "./actionBar/ActionBarInteractionContext";
+import { BranchPickerPrimitiveCount } from "./branchPicker/BranchPickerCount";
+import { BranchPickerPrimitiveNumber } from "./branchPicker/BranchPickerNumber";
+import { BranchPickerPrimitiveRoot } from "./branchPicker/BranchPickerRoot";
+import { MessagePrimitiveIf } from "./message/MessageIf";
+import { ThreadPrimitiveIf } from "./thread/ThreadIf";
+import { MessagePrimitiveError } from "./message/MessageError";
+import { ErrorPrimitiveRoot } from "./error/ErrorRoot";
+import { ErrorPrimitiveMessage } from "./error/ErrorMessage";
+import { ThreadPrimitiveEmpty } from "./thread/ThreadEmpty";
+import { ChainOfThoughtPrimitiveRoot } from "./chainOfThought/ChainOfThoughtRoot";
+
+afterEach(cleanup);
+
+it("renders error state from the real live message and keeps slot and render overrides", async () => {
+  const view = mountMessageAction(() =>
+    h("div", [
+      h(MessagePrimitiveError, null, {
+        default: () =>
+          h(ErrorPrimitiveRoot, null, {
+            default: () => [
+              h(ErrorPrimitiveMessage, { "data-testid": "message" }),
+              h(
+                ErrorPrimitiveMessage,
+                { "data-testid": "override", render: h("strong") },
+                { default: () => "custom" },
+              ),
+            ],
+          }),
+      }),
+      h(ThreadPrimitiveEmpty, null, { default: () => h("span", "empty") }),
+      h(ChainOfThoughtPrimitiveRoot, {
+        "data-testid": "thought",
+        children: "reasoning",
+      }),
+    ]),
+  );
+  expect(view.container.querySelector('[role="alert"]')).toBeNull();
+  expect(view.container.textContent).toBe("reasoning");
+  await view.update({
+    ...view.message.value,
+    status: {
+      type: "incomplete",
+      reason: "error",
+      error: { code: "network", message: "offline" },
+    },
+  });
+  expect(view.container.querySelector('[role="alert"]')).not.toBeNull();
+  expect(
+    view.container.querySelector('[data-testid="message"]')?.textContent,
+  ).toBe("offline");
+  expect(
+    view.container.querySelector('strong[data-testid="override"]')?.textContent,
+  ).toBe("custom");
+  const thought = view.container.querySelector('[data-testid="thought"]');
+  await view.update({
+    ...view.message.value,
+    status: { type: "complete", reason: "stop" },
+  });
+  expect(view.container.querySelector('[role="alert"]')).toBeNull();
+  expect(view.container.querySelector('[data-testid="thought"]')).toBe(thought);
+});
+
+it("reads branch numbers and toggles a single-branch container without losing the live message scope", async () => {
+  const hide = shallowRef(false);
+  const view = mountMessageAction(() =>
+    h(
+      BranchPickerPrimitiveRoot,
+      { hideWhenSingleBranch: hide.value },
+      {
+        default: () => [
+          h(BranchPickerPrimitiveNumber),
+          "/",
+          h(BranchPickerPrimitiveCount),
+        ],
+      },
+    ),
+  );
+  expect(view.container.textContent).toBe("1/1");
+  hide.value = true;
+  await nextTick();
+  expect(view.container.textContent).toBe("");
+  hide.value = false;
+  await nextTick();
+  expect(view.container.textContent).toBe("1/1");
+});
+
+it("updates message and thread filters from both props and runtime state", async () => {
+  const copied = shallowRef(false);
+  const running = shallowRef(false);
+  const view = mountMessageAction(() =>
+    h("div", [
+      h(
+        MessagePrimitiveIf,
+        { copied: copied.value },
+        { default: () => h("span", "message") },
+      ),
+      h(
+        ThreadPrimitiveIf,
+        { running: running.value },
+        { default: () => h("span", "thread") },
+      ),
+    ]),
+  );
+  expect(view.container.textContent).toBe("messagethread");
+  copied.value = true;
+  running.value = true;
+  await nextTick();
+  expect(view.container.textContent).toBe("");
+  flushTapSync(() => view.aui.message.setIsCopied(true));
+  await view.update({ ...view.message.value, status: { type: "running" } });
+  expect(view.container.textContent).toBe("messagethread");
+});
+
+it("keeps an active action-bar interaction visible and releases each lock once", async () => {
+  const autohide = shallowRef<"always" | "never">("never");
+  let acquire!: () => () => void;
+  const Control = defineComponent({
+    setup() {
+      acquire = useActionBarInteractionContext()!.acquireInteractionLock;
+      return () => h("button", "menu");
+    },
+  });
+  const view = mountMessageAction(() =>
+    h(
+      ActionBarPrimitiveRoot,
+      {
+        autohide: autohide.value,
+        autohideFloat: "always",
+        hideWhenRunning: true,
+      },
+      { default: () => h(Control) },
+    ),
+  );
+  const releaseFirst = acquire();
+  const releaseSecond = acquire();
+  autohide.value = "always";
+  await nextTick();
+  expect(view.container.querySelector('[data-floating="true"]')).not.toBeNull();
+  releaseFirst();
+  releaseFirst();
+  await nextTick();
+  expect(view.container.querySelector("button")).not.toBeNull();
+  releaseSecond();
+  await nextTick();
+  expect(view.container.querySelector("button")).toBeNull();
+  flushTapSync(() => view.aui.message.setIsHovering(true));
+  await nextTick();
+  expect(view.container.querySelector("button")).not.toBeNull();
+  await view.update({ ...view.message.value, status: { type: "running" } });
+  expect(view.container.querySelector("button")).toBeNull();
+});

package/src/primitives/queueItem/QueueItemRemove.ts

@@ -0,0 +1,36 @@
+"use client";
+
+import {
+  type ActionButtonElement,
+  type ActionButtonProps,
+  createActionButton,
+} from "../../utils/createActionButton";
+import { useAui } from "@ulearning/ai-store";
+
+const useQueueItemRemove = () => {
+  const aui = useAui();
+
+  const callback = () => {
+    aui.queueItem.remove();
+  };
+
+  return callback;
+};
+
+export namespace QueueItemPrimitiveRemove {
+  export type Element = ActionButtonElement;
+  export type Props = ActionButtonProps<typeof useQueueItemRemove>;
+}
+
+/**
+ * A button that removes this item from the queue.
+ *
+ * @example
+ * ```tsx
+ * <QueueItemPrimitive.Remove>×</QueueItemPrimitive.Remove>
+ * ```
+ */
+export const QueueItemPrimitiveRemove = createActionButton(
+  "QueueItemPrimitive.Remove",
+  useQueueItemRemove,
+);

package/src/primitives/queueItem/QueueItemSteer.ts

@@ -0,0 +1,36 @@
+"use client";
+
+import {
+  type ActionButtonElement,
+  type ActionButtonProps,
+  createActionButton,
+} from "../../utils/createActionButton";
+import { useAui } from "@ulearning/ai-store";
+
+const useQueueItemSteer = () => {
+  const aui = useAui();
+
+  const callback = () => {
+    aui.queueItem.steer();
+  };
+
+  return callback;
+};
+
+export namespace QueueItemPrimitiveSteer {
+  export type Element = ActionButtonElement;
+  export type Props = ActionButtonProps<typeof useQueueItemSteer>;
+}
+
+/**
+ * A button that steers the current run to process this queue item immediately.
+ *
+ * @example
+ * ```tsx
+ * <QueueItemPrimitive.Steer>Run Now</QueueItemPrimitive.Steer>
+ * ```
+ */
+export const QueueItemPrimitiveSteer = createActionButton(
+  "QueueItemPrimitive.Steer",
+  useQueueItemSteer,
+);

package/src/primitives/queueItem/QueueItemText.tsx

@@ -0,0 +1,48 @@
+"use client";
+
+import { Primitive, type PrimitiveProps } from "../../utils/Primitive";
+import { defineComponent, h, type ComponentPublicInstance } from "vue";
+import { useForwardExpose } from "reka-ui";
+import { useAuiState } from "@ulearning/ai-store";
+
+export namespace QueueItemPrimitiveText {
+  export type Element = ComponentPublicInstance;
+  export type Props = PrimitiveProps<"span">;
+}
+
+/**
+ * Renders the prompt text of a queue item.
+ *
+ * @example
+ * ```tsx
+ * <QueueItemPrimitive.Text />
+ * ```
+ */
+export const QueueItemPrimitiveText =
+  defineComponent<QueueItemPrimitiveText.Props>(
+    (props, { attrs, slots }) => {
+      const { forwardRef } = useForwardExpose();
+      const text = useAuiState((s) =>
+        (s.queueItem.parts ?? [])
+          .filter((part) => part.type === "text")
+          .map((part) => part.text)
+          .join("\n\n"),
+      );
+      return () =>
+        h(
+          Primitive.span,
+          {
+            ...attrs,
+            render: props.render,
+            asChild: props.asChild,
+            ref: forwardRef,
+          },
+          { default: () => slots.default?.() ?? props.children ?? text.value },
+        );
+    },
+    {
+      name: "QueueItem.Text",
+      inheritAttrs: false,
+      props: ["render", "asChild", "children"],
+    },
+  );

package/src/primitives/queueItem.ts

@@ -0,0 +1,3 @@
+export { QueueItemPrimitiveText as Text } from "./queueItem/QueueItemText";
+export { QueueItemPrimitiveSteer as Steer } from "./queueItem/QueueItemSteer";
+export { QueueItemPrimitiveRemove as Remove } from "./queueItem/QueueItemRemove";

package/src/primitives/reasoning/useScrollLock.test.tsx

@@ -0,0 +1,296 @@
+// @vitest-environment jsdom
+
+import { KeepAlive, defineComponent, h, nextTick, shallowRef } from "vue";
+import { cleanup, render, renderHook } from "../../tests/vue";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { useScrollLock } from "./useScrollLock";
+
+afterEach(() => {
+  cleanup();
+  vi.useRealTimers();
+  vi.unstubAllGlobals();
+  document.documentElement.removeAttribute("style");
+  document.body.removeAttribute("style");
+  document.body.replaceChildren();
+});
+
+/** jsdom reports zero for every box, so the widths a real browser would measure
+ * are stubbed on the element under test. */
+function stubWidths(
+  element: HTMLElement,
+  { offsetWidth, clientWidth }: { offsetWidth: number; clientWidth: number },
+) {
+  Object.defineProperty(element, "offsetWidth", {
+    configurable: true,
+    value: offsetWidth,
+  });
+  Object.defineProperty(element, "clientWidth", {
+    configurable: true,
+    value: clientWidth,
+  });
+}
+
+function lockWithin(container: HTMLElement) {
+  const animated = document.createElement("div");
+  container.appendChild(animated);
+  return createLock(animated).lock;
+}
+
+function createLock(animated: HTMLElement) {
+  const ref = shallowRef(animated);
+  const { result, unmount } = renderHook(() => useScrollLock(ref, 200));
+  return { lock: result.current, dispose: unmount };
+}
+
+function createSharedScroller() {
+  const scroller = document.createElement("div");
+  scroller.style.overflowY = "auto";
+  scroller.style.borderWidth = "0px";
+  scroller.style.paddingRight = "4px";
+  document.body.appendChild(scroller);
+  Object.defineProperty(scroller, "offsetWidth", { value: 306 });
+  Object.defineProperty(scroller, "clientWidth", {
+    get: () => (scroller.style.scrollbarWidth === "none" ? 306 : 300),
+  });
+  const first = document.createElement("div");
+  const second = document.createElement("div");
+  scroller.append(first, second);
+  return { scroller, first: createLock(first), second: createLock(second) };
+}
+
+describe("useScrollLock", () => {
+  it("compensates for the scrollbar it hides on an element scroller", () => {
+    const scroller = document.createElement("div");
+    scroller.style.overflowY = "auto";
+    scroller.style.borderWidth = "0px";
+    scroller.style.paddingRight = "4px";
+    document.body.appendChild(scroller);
+    stubWidths(scroller, { offsetWidth: 306, clientWidth: 300 });
+
+    lockWithin(scroller)();
+
+    expect(scroller.style.scrollbarWidth).toBe("none");
+    expect(scroller.style.paddingRight).toBe("10px");
+  });
+
+  // The root element's offsetWidth already excludes the viewport scrollbar, so
+  // the element formula reports zero for it; without this the page's centered
+  // content shifts sideways for the length of the animation.
+  it("compensates when the scroller is the root element", () => {
+    const root = document.documentElement;
+    root.style.overflowY = "auto";
+    stubWidths(root, { offsetWidth: 1599, clientWidth: 1599 });
+    vi.stubGlobal("innerWidth", 1605);
+
+    lockWithin(document.body)();
+
+    expect(root.style.scrollbarWidth).toBe("none");
+    expect(root.style.paddingRight).toBe("6px");
+  });
+
+  // With `html { overflow: hidden }` the body scrolls on its own, so the
+  // viewport measure reports nothing and only the element formula sees the bar.
+  it("compensates when the body is the scroller rather than the viewport", () => {
+    const root = document.documentElement;
+    stubWidths(root, { offsetWidth: 1600, clientWidth: 1600 });
+    vi.stubGlobal("innerWidth", 1600);
+    const body = document.body;
+    body.style.overflowY = "auto";
+    body.style.borderWidth = "0px";
+    stubWidths(body, { offsetWidth: 1606, clientWidth: 1600 });
+
+    lockWithin(body)();
+
+    expect(body.style.paddingRight).toBe("6px");
+  });
+
+  // Both can scroll at once, and the padding lands on the body, so it is the
+  // body's own gutter that has to be replaced rather than the viewport's.
+  it("pads a scrolling body by its own gutter, not the viewport's", () => {
+    const root = document.documentElement;
+    stubWidths(root, { offsetWidth: 1585, clientWidth: 1585 });
+    vi.stubGlobal("innerWidth", 1600);
+    const body = document.body;
+    body.style.overflowY = "auto";
+    body.style.borderWidth = "0px";
+    stubWidths(body, { offsetWidth: 1591, clientWidth: 1585 });
+
+    lockWithin(body)();
+
+    expect(body.style.paddingRight).toBe("6px");
+  });
+
+  it("restores the padding it added once the animation is over", () => {
+    vi.useFakeTimers();
+    const scroller = document.createElement("div");
+    scroller.style.overflowY = "auto";
+    scroller.style.borderWidth = "0px";
+    document.body.appendChild(scroller);
+    stubWidths(scroller, { offsetWidth: 306, clientWidth: 300 });
+
+    lockWithin(scroller)();
+    expect(scroller.style.paddingRight).toBe("6px");
+
+    vi.advanceTimersByTime(200);
+
+    expect(scroller.style.paddingRight).toBe("");
+    expect(scroller.style.scrollbarWidth).toBe("");
+  });
+
+  it("keeps overlapping animations locked until the last one finishes", () => {
+    vi.useFakeTimers();
+    const { scroller, first, second } = createSharedScroller();
+    scroller.scrollTop = 120;
+
+    first.lock();
+    vi.advanceTimersByTime(100);
+    second.lock();
+    expect(scroller.style.paddingRight).toBe("10px");
+
+    vi.advanceTimersByTime(100);
+    expect(scroller.style.scrollbarWidth).toBe("none");
+    expect(scroller.style.paddingRight).toBe("10px");
+    scroller.scrollTop = 90;
+    scroller.dispatchEvent(new Event("scroll"));
+    expect(scroller.scrollTop).toBe(120);
+
+    vi.advanceTimersByTime(100);
+    expect(scroller.style.scrollbarWidth).toBe("");
+    expect(scroller.style.paddingRight).toBe("4px");
+    scroller.scrollTop = 90;
+    scroller.dispatchEvent(new Event("scroll"));
+    expect(scroller.scrollTop).toBe(90);
+  });
+
+  it.each(["first", "second"] as const)(
+    "preserves a restarted shared lock when the %s owner is disposed first",
+    (disposedFirst) => {
+      vi.useFakeTimers();
+      const shared = createSharedScroller();
+      const { scroller, first, second } = shared;
+      first.lock();
+      second.lock();
+      vi.advanceTimersByTime(100);
+      first.lock();
+
+      shared[disposedFirst].dispose();
+      expect(scroller.style.scrollbarWidth).toBe("none");
+      expect(scroller.style.paddingRight).toBe("10px");
+
+      shared[disposedFirst === "first" ? "second" : "first"].dispose();
+      expect(scroller.style.scrollbarWidth).toBe("");
+      expect(scroller.style.paddingRight).toBe("4px");
+      scroller.style.scrollbarWidth = "thin";
+      vi.advanceTimersByTime(200);
+      expect(scroller.style.scrollbarWidth).toBe("thin");
+    },
+  );
+
+  it("leaves the padding alone when no scrollbar takes space", () => {
+    const scroller = document.createElement("div");
+    scroller.style.overflowY = "auto";
+    scroller.style.borderWidth = "0px";
+    document.body.appendChild(scroller);
+    stubWidths(scroller, { offsetWidth: 300, clientWidth: 300 });
+
+    lockWithin(scroller)();
+
+    expect(scroller.style.paddingRight).toBe("");
+  });
+
+  it("locks the current scroll container after the element is reparented", () => {
+    vi.useFakeTimers();
+    const first = document.createElement("div");
+    const second = document.createElement("div");
+    first.style.overflowY = "auto";
+    second.style.overflowY = "auto";
+    document.body.append(first, second);
+
+    const animated = document.createElement("div");
+    first.appendChild(animated);
+    const ref = shallowRef(animated);
+    const { result, unmount } = renderHook(() => useScrollLock(ref, 200));
+
+    result.current();
+    expect(first.style.scrollbarWidth).toBe("none");
+
+    second.appendChild(animated);
+    result.current();
+
+    expect(first.style.scrollbarWidth).toBe("");
+    expect(second.style.scrollbarWidth).toBe("none");
+
+    unmount();
+    expect(second.style.scrollbarWidth).toBe("");
+  });
+
+  it("forgets the old cleanup after moving outside a scroll container", () => {
+    const scroller = document.createElement("div");
+    const plainContainer = document.createElement("div");
+    scroller.style.overflowY = "auto";
+    document.body.append(scroller, plainContainer);
+
+    const animated = document.createElement("div");
+    scroller.appendChild(animated);
+    const ref = shallowRef(animated);
+    const { result, unmount } = renderHook(() => useScrollLock(ref, 200));
+
+    result.current();
+    plainContainer.appendChild(animated);
+    result.current();
+    scroller.style.scrollbarWidth = "thin";
+
+    unmount();
+
+    expect(scroller.style.scrollbarWidth).toBe("thin");
+  });
+
+  it("releases a cached owner's lock on deactivation and ignores stale calls", async () => {
+    vi.useFakeTimers();
+    const { scroller, first, second } = createSharedScroller();
+    first.dispose();
+    second.dispose();
+    const target = shallowRef<HTMLElement | null>(
+      scroller.firstElementChild as HTMLElement,
+    );
+    const duration = shallowRef(200);
+    const visible = shallowRef(true);
+    let lock!: () => void;
+    const Owner = defineComponent({
+      setup() {
+        lock = useScrollLock(target, duration);
+        return () => null;
+      },
+    });
+    const view = render(
+      h(
+        defineComponent({
+          setup: () => () =>
+            h(KeepAlive, null, {
+              default: () => (visible.value ? h(Owner) : null),
+            }),
+        }),
+      ),
+    );
+    lock();
+    expect(scroller.style.scrollbarWidth).toBe("none");
+    visible.value = false;
+    await nextTick();
+    expect(scroller.style.scrollbarWidth).toBe("");
+    expect(vi.getTimerCount()).toBe(0);
+    lock();
+    expect(scroller.style.scrollbarWidth).toBe("");
+    visible.value = true;
+    await nextTick();
+    duration.value = 50;
+    lock();
+    vi.advanceTimersByTime(49);
+    expect(scroller.style.scrollbarWidth).toBe("none");
+    vi.advanceTimersByTime(1);
+    expect(scroller.style.scrollbarWidth).toBe("");
+    view.unmount();
+    lock();
+    expect(scroller.style.scrollbarWidth).toBe("");
+    expect(vi.getTimerCount()).toBe(0);
+  });
+});