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

package/src/primitives/chainOfThought/ChainOfThoughtAccordionTrigger.test.tsx

@@ -0,0 +1,116 @@
+// @vitest-environment jsdom
+import {
+  defineComponent,
+  h,
+  shallowRef,
+  type ComponentPublicInstance,
+} from "vue";
+import { cleanup, render } from "../../tests/vue";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { AuiProvider, useAui, useAuiState } from "@ulearning/ai-store";
+import { ChainOfThoughtClient } from "@ulearning/ai-core/store";
+import { ChainOfThoughtPrimitiveAccordionTrigger } from "./ChainOfThoughtAccordionTrigger";
+
+afterEach(cleanup);
+
+const Content = defineComponent({
+  setup() {
+    const collapsed = useAuiState((s) => s.chainOfThought.collapsed);
+    return () =>
+      h(
+        "div",
+        { "data-testid": "reasoning", hidden: collapsed.value },
+        "Reasoning details",
+      );
+  },
+});
+const mount = (
+  props: ChainOfThoughtPrimitiveAccordionTrigger.Props = {},
+  triggerRef = shallowRef<ComponentPublicInstance | null>(null),
+  asChild = false,
+) => {
+  const App = defineComponent({
+    setup() {
+      const aui = useAui({
+        chainOfThought: ChainOfThoughtClient({
+          parts: [
+            {
+              type: "reasoning",
+              text: "Reasoning details",
+              status: { type: "complete" },
+            },
+          ],
+          getMessagePart: () => {
+            throw new Error("Part lookup is not used by the toggle");
+          },
+        }),
+      });
+      return () =>
+        h(
+          AuiProvider,
+          { value: aui },
+          {
+            default: () => [
+              h(
+                ChainOfThoughtPrimitiveAccordionTrigger,
+                { ...props, ref: triggerRef },
+                {
+                  default: () =>
+                    asChild ? h("button", "Thinking") : "Thinking",
+                },
+              ),
+              h(Content),
+            ],
+          },
+        );
+    },
+  });
+  const view = render(h(App));
+  return {
+    ...view,
+    button: view.container.querySelector("button")!,
+    content: view.container.querySelector<HTMLElement>(
+      '[data-testid="reasoning"]',
+    )!,
+  };
+};
+
+describe("ChainOfThoughtPrimitiveAccordionTrigger", () => {
+  it.each(["button", "render", "asChild"] as const)(
+    "exposes expansion and forwards the ref with %s",
+    async (mode) => {
+      const ref = shallowRef<ComponentPublicInstance | null>(null);
+      const { button, content } = mount(
+        {
+          ...(mode === "render" ? { render: h("button") } : {}),
+          ...(mode === "asChild" ? { asChild: true } : {}),
+        },
+        ref,
+        mode === "asChild",
+      );
+      expect(ref.value?.$el).toBe(button);
+      expect(content.hidden).toBe(true);
+      expect(button.getAttribute("aria-expanded")).toBe("false");
+      button.click();
+      await vi.waitFor(() => expect(content.hidden).toBe(false));
+      expect(button.getAttribute("aria-expanded")).toBe("true");
+      button.click();
+      await vi.waitFor(() => expect(content.hidden).toBe(true));
+      expect(button.getAttribute("aria-expanded")).toBe("false");
+    },
+  );
+
+  it("lets the caller veto expansion", () => {
+    const onClick = vi.fn((event: MouseEvent) => event.preventDefault());
+    const { button, content } = mount({ onClick });
+    button.click();
+    expect(onClick).toHaveBeenCalledOnce();
+    expect(content.hidden).toBe(true);
+  });
+
+  it("does not expand a disabled trigger", () => {
+    const { button, content } = mount({ disabled: true });
+    button.click();
+    expect(content.hidden).toBe(true);
+  });
+});

package/src/primitives/chainOfThought/ChainOfThoughtAccordionTrigger.tsx

@@ -0,0 +1,63 @@
+"use client";
+
+import type { ActionButtonElement } from "../../utils/createActionButton";
+import { defineComponent, h, mergeProps } from "vue";
+import { useForwardExpose } from "reka-ui";
+import { useAuiState, useAui } from "@ulearning/ai-store";
+import { Primitive, type PrimitiveProps } from "../../utils/Primitive";
+
+export namespace ChainOfThoughtPrimitiveAccordionTrigger {
+  export type Element = ActionButtonElement;
+  /**
+   * Props for the ChainOfThoughtPrimitive.AccordionTrigger component.
+   * Inherits all button element props and action button functionality.
+   */
+  export type Props = PrimitiveProps<"button">;
+}
+
+/**
+ * A button component that toggles the collapsed state of the chain of thought accordion.
+ *
+ * This component automatically handles the toggle functionality, expanding or collapsing
+ * the chain of thought parts when clicked.
+ * Exposes the current disclosure state through `aria-expanded`.
+ *
+ * @example
+ * ```tsx
+ * <ChainOfThoughtPrimitive.AccordionTrigger>
+ *   Toggle Reasoning
+ * </ChainOfThoughtPrimitive.AccordionTrigger>
+ * ```
+ */
+export const ChainOfThoughtPrimitiveAccordionTrigger =
+  defineComponent<ChainOfThoughtPrimitiveAccordionTrigger.Props>(
+    (props, { attrs, slots }) => {
+      const { forwardRef } = useForwardExpose();
+      const aui = useAui();
+      const collapsed = useAuiState((s) => s.chainOfThought.collapsed);
+      const toggle = (event: MouseEvent) => {
+        if (!event.defaultPrevented)
+          aui.chainOfThought.setCollapsed(!collapsed.value);
+      };
+      return () =>
+        h(
+          Primitive.button,
+          {
+            type: "button",
+            ...attrs,
+            render: props.render,
+            asChild: props.asChild,
+            children: props.children,
+            ref: forwardRef,
+            "aria-expanded": !collapsed.value,
+            ...mergeProps({ onClick: attrs.onClick }, { onClick: toggle }),
+          },
+          slots,
+        );
+    },
+    {
+      name: "ChainOfThoughtPrimitive.AccordionTrigger",
+      inheritAttrs: false,
+      props: ["render", "asChild", "children"],
+    },
+  );

package/src/primitives/chainOfThought/ChainOfThoughtParts.tsx

@@ -0,0 +1,3 @@
+"use client";
+
+export { ChainOfThoughtPrimitiveParts } from "@ulearning/ai-core/vue";

package/src/primitives/chainOfThought/ChainOfThoughtRoot.tsx

@@ -0,0 +1,33 @@
+"use client";
+
+import { defineComponent, h, type ComponentPublicInstance } from "vue";
+import { useForwardExpose } from "reka-ui";
+import { Primitive, type PrimitiveProps } from "../../utils/Primitive";
+
+export namespace ChainOfThoughtPrimitiveRoot {
+  export type Element = ComponentPublicInstance;
+  export type Props = PrimitiveProps<"div">;
+}
+
+export const ChainOfThoughtPrimitiveRoot = defineComponent(
+  (props: ChainOfThoughtPrimitiveRoot.Props, { attrs, slots }) => {
+    const { forwardRef } = useForwardExpose();
+    return () =>
+      h(
+        Primitive.div,
+        {
+          ...attrs,
+          render: props.render,
+          asChild: props.asChild,
+          children: props.children,
+          ref: forwardRef,
+        },
+        slots,
+      );
+  },
+  {
+    name: "ChainOfThoughtPrimitive.Root",
+    inheritAttrs: false,
+    props: ["render", "asChild", "children"],
+  },
+);

package/src/primitives/chainOfThought.ts

@@ -0,0 +1,14 @@
+export {
+  ChainOfThoughtPrimitiveRoot as Root,
+  type ChainOfThoughtPrimitiveRoot as RootPrimitive,
+} from "./chainOfThought/ChainOfThoughtRoot";
+
+export {
+  ChainOfThoughtPrimitiveAccordionTrigger as AccordionTrigger,
+  type ChainOfThoughtPrimitiveAccordionTrigger as AccordionTriggerPrimitive,
+} from "./chainOfThought/ChainOfThoughtAccordionTrigger";
+
+export {
+  ChainOfThoughtPrimitiveParts as Parts,
+  type ChainOfThoughtPrimitiveParts as PartsPrimitive,
+} from "./chainOfThought/ChainOfThoughtParts";

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

@@ -0,0 +1,101 @@
+/**
+ * @vitest-environment jsdom
+ */
+import { defineComponent, h } from "vue";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { AuiProvider, useAui } from "@ulearning/ai-store";
+import { ExternalThread, InMemoryThreadList } from "@ulearning/ai-core/store";
+import { SimpleTextAttachmentAdapter } from "@ulearning/ai-core";
+import { render, cleanup } from "../../tests/vue";
+import { ComposerPrimitiveAddAttachment } from "./ComposerAddAttachment";
+
+describe("ComposerPrimitiveAddAttachment", () => {
+  afterEach(() => {
+    cleanup();
+    document
+      .querySelectorAll('input[type="file"]')
+      .forEach((input) => input.remove());
+    vi.restoreAllMocks();
+  });
+
+  it("handles rejected file picker attachments and continues processing", async () => {
+    const errorSpy = vi.spyOn(console, "error").mockImplementation(() => {});
+
+    const adapter = new SimpleTextAttachmentAdapter();
+    adapter.accept = "*";
+    let captured!: ReturnType<typeof useAui>;
+    const addAttachment = vi
+      .spyOn(adapter, "add")
+      .mockRejectedValueOnce(new Error("unsupported file"))
+      .mockResolvedValueOnce({
+        id: "attachment",
+        name: "supported.txt",
+        type: "file",
+        contentType: "text/plain",
+        file: new File(["b"], "supported.txt", { type: "text/plain" }),
+        status: { type: "requires-action", reason: "composer-send" },
+      });
+
+    vi.spyOn(HTMLInputElement.prototype, "click").mockImplementation(() => {});
+    const { container } = render(
+      h(
+        defineComponent({
+          setup() {
+            const aui = useAui({
+              threads: InMemoryThreadList({
+                thread: () =>
+                  ExternalThread({ messages: [], attachmentAdapter: adapter }),
+              }),
+            });
+            captured = aui;
+            return () =>
+              h(
+                AuiProvider,
+                { value: aui },
+                {
+                  default: () =>
+                    h(ComposerPrimitiveAddAttachment, null, {
+                      default: () => "Add attachment",
+                    }),
+                },
+              );
+          },
+        }),
+      ),
+    );
+
+    const button = container.querySelector("button");
+    expect(button).not.toBeNull();
+    if (!button) throw new Error("Attachment button was not rendered");
+
+    button.click();
+
+    const input =
+      document.querySelector<HTMLInputElement>('input[type="file"]');
+    expect(input).not.toBeNull();
+    if (!input) throw new Error("File input was not rendered");
+
+    const files = [
+      new File(["a"], "unsupported.bin"),
+      new File(["b"], "supported.txt", { type: "text/plain" }),
+    ];
+    Object.defineProperty(input, "files", {
+      configurable: true,
+      value: files,
+    });
+
+    const event = new Event("change");
+    Object.defineProperty(event, "target", { value: input });
+    const result = input.onchange?.call(input, event);
+
+    await expect(Promise.resolve(result)).resolves.toBeUndefined();
+    await vi.waitFor(() =>
+      expect(
+        captured.composer.getState().attachments.map((item) => item.name),
+      ).toEqual(["supported.txt"]),
+    );
+    expect(addAttachment).toHaveBeenCalledTimes(2);
+    expect(errorSpy).not.toHaveBeenCalled();
+    expect(input.isConnected).toBe(false);
+  });
+});

package/src/primitives/composer/ComposerAddAttachment.thread-scope.test.tsx

@@ -0,0 +1,225 @@
+// @vitest-environment jsdom
+import { defineComponent, h, nextTick, shallowRef } from "vue";
+import { render, cleanup } from "../../tests/vue";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { AuiConfig, AuiProvider, Derived, useAui } from "@ulearning/ai-store";
+import { flushTapSync, resource, useResource } from "@ulearning/ai-tap";
+import { ExternalThread, InMemoryThreadList } from "@ulearning/ai-core/store";
+import {
+  AssistantRuntimeProvider,
+  Tools,
+  useLocalRuntime,
+} from "@ulearning/ai-core/vue";
+import {
+  SimpleTextAttachmentAdapter,
+  type AssistantRuntime,
+  type ChatModelAdapter,
+} from "@ulearning/ai-core";
+import { ComposerPrimitiveAddAttachment } from "./ComposerAddAttachment";
+
+const act = async (action: () => void | Promise<void>) => {
+  await flushTapSync(action);
+  flushTapSync(() => {});
+  await nextTick();
+};
+
+const attachmentAdapter = new SimpleTextAttachmentAdapter();
+const model: ChatModelAdapter = { async *run() {} };
+
+afterEach(() => {
+  cleanup();
+  document
+    .querySelectorAll('input[type="file"]')
+    .forEach((input) => input.remove());
+  vi.restoreAllMocks();
+});
+
+const StandaloneThread = resource(function useStandaloneThread() {
+  return useResource(ExternalThread({ messages: [], attachmentAdapter }));
+});
+
+const setup = async (mode: "store" | "runtime" | "standalone") => {
+  vi.spyOn(HTMLInputElement.prototype, "click").mockImplementation(() => {});
+  let captured!: ReturnType<typeof useAui>;
+  let runtime: AssistantRuntime | undefined;
+  let changeScope!: () => void;
+  const Capture = defineComponent({
+    setup() {
+      captured = useAui();
+      return () =>
+        h(ComposerPrimitiveAddAttachment, null, { default: () => "Add file" });
+    },
+  });
+  const Scope = defineComponent({
+    setup() {
+      const aui = useAui();
+      const withTools = shallowRef(false);
+      changeScope = () => {
+        withTools.value = true;
+      };
+      return () =>
+        h(
+          AuiProvider,
+          {
+            extends: aui,
+            config: AuiConfig(withTools.value ? { tools: Tools({}) } : {}),
+          },
+          { default: () => h(Capture) },
+        );
+    },
+  });
+  const StoreApp = defineComponent({
+    setup() {
+      const aui = useAui({
+        threads: InMemoryThreadList({
+          thread: () => ExternalThread({ messages: [], attachmentAdapter }),
+        }),
+      });
+      return () => h(AuiProvider, { value: aui }, { default: () => h(Scope) });
+    },
+  });
+  const RuntimeApp = defineComponent({
+    setup() {
+      runtime = useLocalRuntime(model, {
+        adapters: { attachments: attachmentAdapter },
+      });
+      return () =>
+        h(
+          AssistantRuntimeProvider,
+          { runtime: runtime! },
+          { default: () => h(Scope) },
+        );
+    },
+  });
+  const StandaloneApp = defineComponent({
+    setup() {
+      const config = AuiConfig({
+        thread: StandaloneThread(),
+        composer: Derived({
+          source: "thread",
+          query: {},
+          get: (aui) => aui.thread.composer(),
+        }),
+      });
+      return () => h(AuiProvider, { config }, { default: () => h(Capture) });
+    },
+  });
+  const App =
+    mode === "store"
+      ? StoreApp
+      : mode === "runtime"
+        ? RuntimeApp
+        : StandaloneApp;
+  const view = render(h(App));
+  if (runtime)
+    await act(async () => {
+      await runtime!.threads.mainItem.initialize();
+    });
+  await act(async () => view.container.querySelector("button")!.click());
+  const input = document.querySelector<HTMLInputElement>('input[type="file"]')!;
+  const select = async () => {
+    Object.defineProperty(input, "files", {
+      configurable: true,
+      value: [
+        new File(["private draft"], "thread-a.txt", { type: "text/plain" }),
+      ],
+    });
+    const event = new Event("change");
+    Object.defineProperty(event, "target", { value: input });
+    await act(async () => {
+      await input.onchange?.call(input, event);
+    });
+  };
+  return {
+    aui: () => captured,
+    select,
+    changeScope,
+    unmount: view.unmount,
+    rerender: () => view.rerender(h(App)),
+  };
+};
+
+describe.each(["store", "runtime"] as const)(
+  "ComposerPrimitive.AddAttachment thread ownership in %s",
+  (mode) => {
+    it("adds a selected file to the thread that opened the picker", async () => {
+      const { aui, select } = await setup(mode);
+      await select();
+      await vi.waitFor(() =>
+        expect(
+          aui()
+            .composer.getState()
+            .attachments.map((item) => item.name),
+        ).toEqual(["thread-a.txt"]),
+      );
+    });
+
+    it("does not add an old picker's selection to a different thread", async () => {
+      const { aui, select } = await setup(mode);
+      const originId = aui().threads.getState().mainThreadId;
+      await act(async () => {
+        aui().threads.switchToNewThread();
+      });
+      await vi.waitFor(() =>
+        expect(aui().threads.getState().mainThreadId).not.toBe(originId),
+      );
+      expect(aui().composer.getState().attachments).toHaveLength(0);
+      await select();
+      expect(aui().composer.getState().attachments).toHaveLength(0);
+    });
+
+    it("keeps the picker usable when the same draft changes", async () => {
+      const { aui, select } = await setup(mode);
+      await act(async () => {
+        aui().composer.setText("same conversation");
+      });
+      await select();
+      expect(aui().composer.getState().text).toBe("same conversation");
+      await vi.waitFor(() =>
+        expect(
+          aui()
+            .composer.getState()
+            .attachments.map((item) => item.name),
+        ).toEqual(["thread-a.txt"]),
+      );
+    });
+
+    it("keeps the picker usable when an unrelated scope changes", async () => {
+      const { aui, select, changeScope } = await setup(mode);
+      const original = aui();
+      await act(async () => changeScope());
+      expect(Object.is(aui(), original)).toBe(true);
+      expect(aui().optional.tools).toBeDefined();
+      expect(Object.is(aui().composer, original.composer)).toBe(true);
+      await select();
+      await vi.waitFor(() =>
+        expect(
+          aui()
+            .composer.getState()
+            .attachments.map((item) => item.name),
+        ).toEqual(["thread-a.txt"]),
+      );
+    });
+
+    it("settles a picker result after its provider unmounts", async () => {
+      const { select, unmount } = await setup(mode);
+      unmount();
+      await expect(select()).resolves.toBeUndefined();
+      expect(document.querySelector('input[type="file"]')).toBeNull();
+    });
+  },
+);
+
+it("keeps a standalone composer picker usable after a parent re-render", async () => {
+  const { aui, select, rerender } = await setup("standalone");
+  expect(aui().optional.threadListItem).toBeUndefined();
+  await rerender();
+  await select();
+  await vi.waitFor(() =>
+    expect(
+      aui()
+        .composer.getState()
+        .attachments.map((item) => item.name),
+    ).toEqual(["thread-a.txt"]),
+  );
+});

package/src/primitives/composer/ComposerAddAttachment.ts

@@ -0,0 +1,88 @@
+"use client";
+
+import {
+  type ActionButtonElement,
+  type ActionButtonProps,
+  createActionButton,
+} from "../../utils/createActionButton";
+import { computed, onDeactivated, onScopeDispose, watch } from "vue";
+import { useAui } from "@ulearning/ai-store";
+import { useComposerAddAttachment as useComposerAddAttachmentBehavior } from "@ulearning/ai-core/vue";
+
+const useComposerAddAttachment = (
+  options: {
+    /** allow selecting multiple files */
+    multiple?: boolean | undefined;
+  } = {},
+) => {
+  const { disabled, addAttachment } = useComposerAddAttachmentBehavior();
+  const aui = useAui();
+  let generation = 0;
+  const pending = new Set<HTMLInputElement>();
+  const invalidate = () => {
+    generation++;
+    for (const input of pending) input.remove();
+    pending.clear();
+  };
+  watch([() => aui.composer, () => aui.optional.threadListItem], invalidate, {
+    flush: "sync",
+  });
+  onScopeDispose(invalidate);
+  onDeactivated(invalidate);
+
+  const callback = () => {
+    const scopeGeneration = generation;
+    const input = document.createElement("input");
+    input.type = "file";
+    input.multiple = options.multiple ?? true;
+    input.hidden = true;
+
+    const attachmentAccept = aui.composer.getState().attachmentAccept;
+    if (attachmentAccept !== "*") {
+      input.accept = attachmentAccept;
+    }
+
+    pending.add(input);
+    document.body.appendChild(input);
+
+    input.onchange = async (e) => {
+      const fileList = (e.target as HTMLInputElement).files;
+      if (!fileList) return;
+
+      const attachmentPromises = Array.from(fileList, async (file) => {
+        try {
+          if (generation !== scopeGeneration) return;
+          await addAttachment(file);
+        } catch {
+          // The composer runtime emits composer.attachmentAddError before rejecting.
+        }
+      });
+
+      input.remove();
+      pending.delete(input);
+      await Promise.all(attachmentPromises);
+    };
+
+    input.oncancel = () => {
+      if (!input.files || input.files.length === 0) {
+        input.remove();
+        pending.delete(input);
+      }
+    };
+
+    input.click();
+  };
+
+  return computed(() => (disabled.value ? null : callback));
+};
+
+export namespace ComposerPrimitiveAddAttachment {
+  export type Element = ActionButtonElement;
+  export type Props = ActionButtonProps<typeof useComposerAddAttachment>;
+}
+
+export const ComposerPrimitiveAddAttachment = createActionButton(
+  "ComposerPrimitive.AddAttachment",
+  useComposerAddAttachment,
+  ["multiple"],
+);