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

package/src/primitives/composer/ComposerCancel.focus.test.tsx

@@ -0,0 +1,324 @@
+/** @vitest-environment jsdom */
+import { fireEvent as domEvents, screen } from "@testing-library/dom";
+import {
+  computed,
+  defineComponent,
+  h,
+  nextTick,
+  type VNode,
+  type VNodeChild,
+} from "vue";
+import { actAsync as act, cleanup, render as renderVue } from "../../tests/vue";
+const render = async (node: VNode) => {
+  const result = renderVue(node);
+  await nextTick();
+  return result;
+};
+const fireEvent = {
+  click: (element: Element, init?: MouseEventInit) =>
+    act(() => domEvents.click(element, init)),
+  keyDown: (element: Element, init?: KeyboardEventInit) =>
+    act(() => domEvents.keyDown(element, init)),
+};
+import { afterEach, describe, expect, it, vi } from "vitest";
+import {
+  AssistantRuntimeProvider,
+  useExternalStoreRuntime,
+} from "@ulearning/ai-core/vue";
+import type { ThreadMessageLike } from "@ulearning/ai-core";
+import { ComposerPrimitiveRoot } from "./ComposerRoot";
+import { ComposerPrimitiveInput } from "./ComposerInput";
+import { ComposerPrimitiveCancel } from "./ComposerCancel";
+import { ThreadPrimitiveRoot } from "../thread/ThreadRoot";
+import { ThreadPrimitiveViewportProvider } from "../../context/providers/ThreadViewportProvider";
+import { ThreadPrimitiveMessages } from "../thread/ThreadMessages";
+import { ActionBarPrimitiveEdit } from "../actionBar/ActionBarEdit";
+
+const messages = [{ id: "user-message", text: "Original message" }];
+const { cancelOverride } = vi.hoisted(() => ({ cancelOverride: vi.fn() }));
+vi.mock("@ulearning/ai-core/vue", async (importOriginal) => {
+  const original =
+    await importOriginal<typeof import("@ulearning/ai-core/vue")>();
+  return {
+    ...original,
+    useComposerCancel: () => {
+      const behavior = original.useComposerCancel();
+      return cancelOverride() ?? behavior;
+    },
+  };
+});
+const convertMessage = (
+  message: (typeof messages)[number],
+): ThreadMessageLike => ({
+  id: message.id,
+  role: "user",
+  content: [{ type: "text", text: message.text }],
+});
+
+const Provider = defineComponent<{
+  isRunning?: boolean;
+  onCancel?: () => Promise<void>;
+}>(
+  (props, { slots }) => {
+    const runtime = useExternalStoreRuntime(() => ({
+      messages,
+      convertMessage,
+      onNew: async () => {},
+      onEdit: async () => {},
+      isRunning: props.isRunning ?? false,
+      onCancel: props.onCancel,
+    }));
+    return () => h(AssistantRuntimeProvider, { runtime }, slots);
+  },
+  { props: ["isRunning", "onCancel"] },
+);
+
+const Message = () => (
+  <ActionBarPrimitiveEdit>Edit message</ActionBarPrimitiveEdit>
+);
+
+type Options = {
+  nonForm?: boolean;
+  disabledMain?: boolean;
+  showMain?: boolean;
+  contentEditable?: boolean;
+  beforeMain?: VNodeChild;
+  onCancelClick?: ComposerPrimitiveCancel.Props["onClick"];
+};
+
+const setup = async ({
+  nonForm,
+  disabledMain,
+  showMain = true,
+  contentEditable,
+  beforeMain,
+  onCancelClick,
+}: Options = {}) => {
+  const EditComposer = () => (
+    <ComposerPrimitiveRoot render={nonForm ? <div /> : undefined}>
+      <ComposerPrimitiveInput aria-label="Edit composer" autoFocus />
+      <ComposerPrimitiveCancel
+        {...(onCancelClick ? { onClick: onCancelClick } : {})}
+      >
+        Cancel edit
+      </ComposerPrimitiveCancel>
+    </ComposerPrimitiveRoot>
+  );
+  await render(
+    <Provider>
+      <input aria-label="Outside thread" />
+      <ThreadPrimitiveRoot>
+        <ThreadPrimitiveViewportProvider>
+          <ThreadPrimitiveMessages components={{ Message, EditComposer }} />
+          {beforeMain}
+          {showMain && (
+            <ComposerPrimitiveRoot render={nonForm ? <section /> : undefined}>
+              {contentEditable ? (
+                <div
+                  role="textbox"
+                  aria-label="Main composer"
+                  contenteditable
+                />
+              ) : (
+                <ComposerPrimitiveInput
+                  aria-label="Main composer"
+                  disabled={disabledMain}
+                />
+              )}
+            </ComposerPrimitiveRoot>
+          )}
+        </ThreadPrimitiveViewportProvider>
+      </ThreadPrimitiveRoot>
+    </Provider>,
+  );
+  await fireEvent.click(screen.getByRole("button", { name: "Edit message" }));
+  const input = screen.getByRole("textbox", { name: "Edit composer" });
+  await act(() => input.focus());
+  return { input, cancel: screen.getByRole("button", { name: "Cancel edit" }) };
+};
+
+afterEach(() => {
+  cleanup();
+  cancelOverride.mockReset();
+});
+
+describe("edit composer cancellation focus", async () => {
+  it.each(["Escape", "Cancel"])(
+    "returns focus to the main composer after %s",
+    async (action) => {
+      const { input, cancel } = await setup();
+      if (action === "Escape") {
+        await fireEvent.keyDown(input, { key: "Escape" });
+      } else {
+        await act(() => cancel.focus());
+        await fireEvent.click(cancel);
+      }
+      expect(
+        screen.queryByRole("textbox", { name: "Edit composer" }),
+      ).toBeNull();
+      expect(document.activeElement).toBe(
+        screen.getByRole("textbox", { name: "Main composer" }),
+      );
+    },
+  );
+
+  it("supports non-form composer roots and a contenteditable destination", async () => {
+    const { input } = await setup({ nonForm: true, contentEditable: true });
+    await fireEvent.keyDown(input, { key: "Escape" });
+    expect(document.activeElement).toBe(
+      screen.getByRole("textbox", { name: "Main composer" }),
+    );
+  });
+
+  it("does not focus a nested thread's composer", async () => {
+    const { input } = await setup({
+      beforeMain: (
+        <Provider>
+          <ThreadPrimitiveRoot>
+            <ComposerPrimitiveRoot>
+              <textarea aria-label="Nested composer" />
+            </ComposerPrimitiveRoot>
+          </ThreadPrimitiveRoot>
+        </Provider>
+      ),
+    });
+    await fireEvent.keyDown(input, { key: "Escape" });
+    expect(document.activeElement).toBe(
+      screen.getByRole("textbox", { name: "Main composer" }),
+    );
+  });
+
+  it.each(["hidden", "inert"] as const)(
+    "skips a %s main composer before the usable destination",
+    async (attribute) => {
+      const { input } = await setup({
+        beforeMain: (
+          <ComposerPrimitiveRoot {...{ [attribute]: true }}>
+            <textarea aria-label="Unavailable composer" />
+          </ComposerPrimitiveRoot>
+        ),
+      });
+      await fireEvent.keyDown(input, { key: "Escape" });
+      expect(document.activeElement).toBe(
+        screen.getByRole("textbox", { name: "Main composer" }),
+      );
+    },
+  );
+
+  it.each([{ showMain: false }, { disabledMain: true }])(
+    "cancels safely without a usable destination: %j",
+    async (options) => {
+      const { input } = await setup(options);
+      await fireEvent.keyDown(input, { key: "Escape" });
+      expect(
+        screen.queryByRole("textbox", { name: "Edit composer" }),
+      ).toBeNull();
+      expect(document.activeElement).toBe(document.body);
+    },
+  );
+
+  it("preserves focus deliberately moved by the consumer", async () => {
+    const { cancel } = await setup({
+      onCancelClick: () =>
+        screen.getByRole("textbox", { name: "Outside thread" }).focus(),
+    });
+    await act(() => cancel.focus());
+    await fireEvent.click(cancel);
+    expect(screen.queryByRole("textbox", { name: "Edit composer" })).toBeNull();
+    expect(document.activeElement).toBe(
+      screen.getByRole("textbox", { name: "Outside thread" }),
+    );
+  });
+
+  it("restores focus when cancellation hides the connected edit composer", async () => {
+    cancelOverride.mockReturnValue({
+      disabled: computed(() => false),
+      cancel: () => {
+        const active = document.activeElement as HTMLElement;
+        active.closest<HTMLElement>('[data-aui-composer-type="edit"]')!.hidden =
+          true;
+        active.blur();
+      },
+    });
+    const { cancel } = await setup();
+    await act(() => cancel.focus());
+    await fireEvent.click(cancel);
+
+    expect(cancel.isConnected).toBe(true);
+    expect(cancel.closest("[hidden]")).not.toBeNull();
+    expect(document.activeElement).toBe(
+      screen.getByRole("textbox", { name: "Main composer" }),
+    );
+  });
+
+  it("does not cancel or restore focus when the consumer prevents the action", async () => {
+    const { cancel } = await setup({
+      onCancelClick: (event) => event.preventDefault(),
+    });
+    await act(() => cancel.focus());
+    await fireEvent.click(cancel);
+    expect(
+      screen.queryByRole("textbox", { name: "Edit composer" }),
+    ).not.toBeNull();
+    expect(document.activeElement).toBe(cancel);
+  });
+
+  it("leaves focus and editing unchanged when cancellation throws", async () => {
+    const error = new Error("Cancellation failed");
+    const cancel = vi.fn(() => {
+      throw error;
+    });
+    cancelOverride.mockReturnValue({
+      disabled: computed(() => false),
+      cancel,
+    });
+    const { cancel: button } = await setup();
+    await act(() => button.focus());
+    const onError = (event: ErrorEvent) => {
+      if (event.error === error) event.preventDefault();
+    };
+    window.addEventListener("error", onError);
+    try {
+      await fireEvent.click(button);
+      expect(cancel).toHaveBeenCalledOnce();
+      expect(
+        screen.queryByRole("textbox", { name: "Edit composer" }),
+      ).not.toBeNull();
+      expect(document.activeElement).toBe(button);
+    } finally {
+      window.removeEventListener("error", onError);
+    }
+  });
+
+  it.each(["input", "button"])(
+    "does not restore focus after pointer cancellation with focus on the %s",
+    async (source) => {
+      const { input, cancel } = await setup();
+      await act(() => (source === "input" ? input : cancel).focus());
+      await fireEvent.click(cancel, { detail: 1 });
+      expect(
+        screen.queryByRole("textbox", { name: "Edit composer" }),
+      ).toBeNull();
+      expect(document.activeElement).toBe(document.body);
+    },
+  );
+
+  it("does not move focus when cancelling a running thread", async () => {
+    const onCancel = vi.fn(async () => {});
+    await render(
+      <Provider isRunning onCancel={onCancel}>
+        <ThreadPrimitiveRoot>
+          <ComposerPrimitiveRoot>
+            <textarea aria-label="Main composer" />
+            <ComposerPrimitiveCancel>Stop run</ComposerPrimitiveCancel>
+          </ComposerPrimitiveRoot>
+        </ThreadPrimitiveRoot>
+      </Provider>,
+    );
+    const cancel = screen.getByRole("button", { name: "Stop run" });
+    await act(() => cancel.focus());
+    await fireEvent.click(cancel);
+    expect(onCancel).toHaveBeenCalledOnce();
+    expect(document.activeElement).toBe(cancel);
+  });
+});

package/src/primitives/composer/ComposerCancel.ts

@@ -0,0 +1,52 @@
+"use client";
+
+import {
+  type ActionButtonElement,
+  type ActionButtonProps,
+  createActionButton,
+} from "../../utils/createActionButton";
+import { computed } from "vue";
+import { useComposerCancel as useComposerCancelBehavior } from "@ulearning/ai-core/vue";
+import { useComposerCancelWithFocus } from "./useComposerCancelWithFocus";
+
+const useComposerCancel = () => {
+  const { disabled, cancel } = useComposerCancelBehavior();
+  const cancelWithFocus = useComposerCancelWithFocus(cancel);
+  const invoke = (event: MouseEvent) =>
+    cancelWithFocus(
+      event.detail === 0 && event.currentTarget instanceof HTMLElement
+        ? event.currentTarget
+        : null,
+    );
+  return computed(() => (disabled.value ? null : invoke));
+};
+
+export namespace ComposerPrimitiveCancel {
+  export type Element = ActionButtonElement;
+  /**
+   * Props for the ComposerPrimitive.Cancel component.
+   * Inherits all button element props and action button functionality.
+   */
+  export type Props = ActionButtonProps<typeof useComposerCancel>;
+}
+
+/**
+ * A button component that cancels the current message composition.
+ *
+ * This component automatically handles the cancel functionality and is disabled
+ * when canceling is not available.
+ * Keyboard or assistive-technology activation after editing returns focus to the
+ * main thread composer when available, unless a handler has moved focus elsewhere.
+ * Pointer activation preserves the existing focus behavior.
+ *
+ * @example
+ * ```tsx
+ * <ComposerPrimitive.Cancel>
+ *   Cancel
+ * </ComposerPrimitive.Cancel>
+ * ```
+ */
+export const ComposerPrimitiveCancel = createActionButton(
+  "ComposerPrimitive.Cancel",
+  useComposerCancel,
+);

package/src/primitives/composer/ComposerCompactContext.tsx

@@ -0,0 +1,10 @@
+"use client";
+import { inject, type ComputedRef, type InjectionKey } from "vue";
+export type ComposerCompactContextValue = {
+  setMultiline: (multiline: boolean) => void;
+};
+export const ComposerCompactContext: InjectionKey<
+  ComputedRef<ComposerCompactContextValue | null>
+> = Symbol("ComposerCompactContext");
+export const useComposerCompactContextOptional = () =>
+  inject(ComposerCompactContext, undefined);

package/src/primitives/composer/ComposerDictate.ts

@@ -0,0 +1,37 @@
+"use client";
+
+import { computed } from "vue";
+
+import type {
+  ActionButtonElement,
+  ActionButtonProps,
+} from "../../utils/createActionButton";
+import { createActionButton } from "../../utils/createActionButton";
+import { useComposerDictate as useComposerDictateBehavior } from "@ulearning/ai-core/vue";
+
+const useComposerDictate = () => {
+  const { disabled, startDictation } = useComposerDictateBehavior();
+  return computed(() => (disabled.value ? null : startDictation));
+};
+
+export namespace ComposerPrimitiveDictate {
+  export type Element = ActionButtonElement;
+  export type Props = ActionButtonProps<typeof useComposerDictate>;
+}
+
+/**
+ * A button that starts dictation to convert voice to text.
+ *
+ * Requires a DictationAdapter to be configured in the runtime.
+ *
+ * @example
+ * ```tsx
+ * <ComposerPrimitive.Dictate>
+ *   <MicIcon />
+ * </ComposerPrimitive.Dictate>
+ * ```
+ */
+export const ComposerPrimitiveDictate = createActionButton(
+  "ComposerPrimitive.Dictate",
+  useComposerDictate,
+);

package/src/primitives/composer/ComposerDictationTranscript.tsx

@@ -0,0 +1,55 @@
+"use client";
+
+import { defineComponent, h, type ComponentPublicInstance } from "vue";
+import { useForwardExpose } from "reka-ui";
+import { Primitive, type PrimitiveProps } from "../../utils/Primitive";
+import { useAuiState } from "@ulearning/ai-store";
+
+export namespace ComposerPrimitiveDictationTranscript {
+  export type Element = ComponentPublicInstance;
+  export type Props = PrimitiveProps<"span">;
+}
+
+/**
+ * Renders the current interim (partial) transcript while dictation is active.
+ *
+ * This component displays real-time feedback of what the user is saying before
+ * the transcription is finalized and committed to the composer input.
+ *
+ * @example
+ * ```tsx
+ * <AuiIf condition={(s) => s.composer.dictation != null}>
+ *   <div className="dictation-preview">
+ *     <ComposerPrimitive.DictationTranscript />
+ *   </div>
+ * </AuiIf>
+ * ```
+ */
+export const ComposerPrimitiveDictationTranscript =
+  defineComponent<ComposerPrimitiveDictationTranscript.Props>(
+    (props, { attrs, slots }) => {
+      const { forwardRef } = useForwardExpose();
+      const transcript = useAuiState((s) => s.composer.dictation?.transcript);
+      return () =>
+        !transcript.value
+          ? null
+          : h(
+              Primitive.span,
+              {
+                ...attrs,
+                render: props.render,
+                asChild: props.asChild,
+                ref: forwardRef,
+              },
+              {
+                default: () =>
+                  slots.default?.() ?? props.children ?? transcript.value,
+              },
+            );
+    },
+    {
+      name: "ComposerPrimitive.DictationTranscript",
+      inheritAttrs: false,
+      props: ["render", "asChild", "children"],
+    },
+  );

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

@@ -0,0 +1,118 @@
+/** @vitest-environment jsdom */
+import { actAsync as act, cleanup, render } from "../../tests/vue";
+import { fireEvent, screen } from "@testing-library/dom";
+import { defineComponent } from "vue";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import {
+  AssistantRuntimeProvider,
+  useExternalStoreRuntime,
+} from "@ulearning/ai-core/vue";
+import type { AttachmentAdapter, ThreadMessage } from "@ulearning/ai-core";
+import { ComposerPrimitiveAddAttachment } from "./ComposerAddAttachment";
+import { ComposerPrimitiveInput } from "./ComposerInput";
+import { ComposerPrimitiveRoot } from "./ComposerRoot";
+import { ComposerPrimitiveSend } from "./ComposerSend";
+import { ThreadPrimitiveViewportProvider } from "../../context/providers/ThreadViewportProvider";
+
+const makeAttachmentAdapter = () => {
+  const add = vi.fn(async ({ file }: { file: File }) => ({
+    id: file.name,
+    type: "file" as const,
+    name: file.name,
+    contentType: file.type,
+    file,
+    status: {
+      type: "requires-action" as const,
+      reason: "composer-send" as const,
+    },
+  }));
+  const adapter: AttachmentAdapter = {
+    accept: "*",
+    add,
+    remove: async () => {},
+    send: async (attachment) => ({
+      ...attachment,
+      status: { type: "complete" },
+      content: [{ type: "text", text: "file body" }],
+    }),
+  };
+  return { adapter, add };
+};
+
+const App = defineComponent<{
+  isDisabled: boolean;
+  onNew: () => Promise<void>;
+  attachments: AttachmentAdapter;
+}>(
+  (props) => {
+    const runtime = useExternalStoreRuntime<ThreadMessage>(() => ({
+      messages: [],
+      isDisabled: props.isDisabled,
+      onNew: props.onNew,
+      adapters: { attachments: props.attachments },
+    }));
+    return () => (
+      <AssistantRuntimeProvider runtime={runtime}>
+        <ThreadPrimitiveViewportProvider>
+          <ComposerPrimitiveRoot>
+            <ComposerPrimitiveInput aria-label="input" />
+            <ComposerPrimitiveAddAttachment>
+              attach
+            </ComposerPrimitiveAddAttachment>
+            <ComposerPrimitiveSend>send</ComposerPrimitiveSend>
+          </ComposerPrimitiveRoot>
+        </ThreadPrimitiveViewportProvider>
+      </AssistantRuntimeProvider>
+    );
+  },
+  { props: ["isDisabled", "onNew", "attachments"] },
+);
+
+const button = (name: string) =>
+  screen.getByRole("button", { name }) as HTMLButtonElement;
+
+const settle = () =>
+  act(async () => {
+    await new Promise((resolve) => setTimeout(resolve, 0));
+  });
+
+afterEach(() => {
+  cleanup();
+  document.body.querySelectorAll('input[type="file"]').forEach((input) => {
+    input.remove();
+  });
+});
+
+describe("composer on a disabled thread", () => {
+  it("blocks sending a draft that was entered before the thread was disabled", async () => {
+    const onNew = vi.fn(async () => {});
+    const { adapter } = makeAttachmentAdapter();
+    const view = render(
+      <App isDisabled={false} onNew={onNew} attachments={adapter} />,
+    );
+    await act(() =>
+      fireEvent.input(screen.getByRole("textbox", { name: "input" }), {
+        target: { value: "hello" },
+      }),
+    );
+
+    await view.rerender(<App isDisabled onNew={onNew} attachments={adapter} />);
+    await settle();
+
+    expect(button("send").disabled).toBe(true);
+    fireEvent.click(button("send"));
+    await settle();
+    expect(onNew).not.toHaveBeenCalled();
+  });
+
+  it("disables attachment selection", () => {
+    const onNew = vi.fn(async () => {});
+    const { adapter, add } = makeAttachmentAdapter();
+    render(<App isDisabled onNew={onNew} attachments={adapter} />);
+
+    expect(button("attach").disabled).toBe(true);
+    fireEvent.click(button("attach"));
+    expect(document.body.querySelector('input[type="file"]')).toBeNull();
+    expect(add).not.toHaveBeenCalled();
+  });
+});

package/src/primitives/composer/ComposerIf.ts

@@ -0,0 +1,4 @@
+"use client";
+
+export { ComposerPrimitiveIf } from "@ulearning/ai-core/vue";
+export type { UseComposerIfProps } from "@ulearning/ai-core/vue";