@assistant-ui/vue 0.0.0-stage → 0.0.1

package/src/__tests__/primitives.test.ts

@@ -0,0 +1,361 @@
+import { describe, expect, it, vi } from "vitest";
+import { createApp, defineComponent, h, nextTick, type Component } from "vue";
+import { flushTapSync } from "@assistant-ui/tap";
+import { AuiConfig } from "@assistant-ui/store/client";
+import { RuntimeAdapter } from "@assistant-ui/core/store";
+import type { AppendMessage, ExternalStoreAdapter } from "@assistant-ui/core";
+import {
+  AssistantRuntimeImpl,
+  ExternalStoreRuntimeCore,
+} from "@assistant-ui/core/internal";
+import { AuiProvider } from "../AuiProvider";
+import { useAuiState } from "../useAuiState";
+import { ThreadPrimitiveMessages } from "../primitives/ThreadPrimitiveMessages";
+import { ComposerPrimitiveInput } from "../primitives/ComposerPrimitiveInput";
+import { ComposerPrimitiveSend } from "../primitives/ComposerPrimitiveSend";
+import { ComposerPrimitiveCancel } from "../primitives/ComposerPrimitiveCancel";
+
+type DemoMessage = { role: "user" | "assistant"; text: string };
+
+const createTestRuntime = () => {
+  let messages: DemoMessage[] = [];
+  let isRunning = false;
+  let isDisabled = false;
+  const onNew = vi.fn<(message: AppendMessage) => Promise<void>>(
+    async () => {},
+  );
+  const onCancel = vi.fn(async () => {});
+  const makeAdapter = (): ExternalStoreAdapter<DemoMessage> => ({
+    messages,
+    isRunning,
+    isDisabled,
+    convertMessage: (message) => ({
+      role: message.role,
+      content: [{ type: "text", text: message.text }],
+    }),
+    onNew,
+    onCancel,
+  });
+  const core = new ExternalStoreRuntimeCore(makeAdapter());
+  const runtime = new AssistantRuntimeImpl(core);
+  const sync = () => core.setAdapter(makeAdapter());
+  const append = (message: DemoMessage) => {
+    messages = [...messages, message];
+    sync();
+  };
+  const setRunning = (value: boolean) => {
+    isRunning = value;
+    sync();
+  };
+  const setDisabled = (value: boolean) => {
+    isDisabled = value;
+    sync();
+  };
+  return { runtime, append, setRunning, setDisabled, onNew, onCancel };
+};
+
+const MessageProbe = defineComponent({
+  setup() {
+    const role = useAuiState((s) => s.message.role);
+    const text = useAuiState((s) => {
+      const part = s.message.content[0];
+      return part?.type === "text" ? part.text : "";
+    });
+    return () => h("li", { class: "msg", "data-role": role.value }, text.value);
+  },
+});
+
+const mountChat = (runtime: AssistantRuntimeImpl, view: Component) => {
+  const app = createApp(
+    defineComponent({
+      setup: () => () =>
+        h(
+          AuiProvider,
+          { config: AuiConfig({ threads: RuntimeAdapter(runtime) }) },
+          { default: () => h(view) },
+        ),
+    }),
+  );
+  const el = document.createElement("div");
+  app.mount(el);
+  return { el, unmount: () => app.unmount() };
+};
+
+describe("vue primitives", () => {
+  it("renders one scoped slot instance per thread message", async () => {
+    const { runtime, append } = createTestRuntime();
+    const View = defineComponent({
+      setup: () => () =>
+        h(ThreadPrimitiveMessages, null, { default: () => h(MessageProbe) }),
+    });
+    const { el, unmount } = mountChat(runtime, View);
+
+    expect(el.querySelectorAll("li.msg")).toHaveLength(0);
+
+    flushTapSync(() => append({ role: "user", text: "hi" }));
+    flushTapSync(() => append({ role: "assistant", text: "hello!" }));
+    await vi.waitFor(async () => {
+      await nextTick();
+      expect(el.querySelectorAll("li.msg")).toHaveLength(2);
+    });
+
+    const items = [...el.querySelectorAll("li.msg")];
+    expect(items.map((item) => item.getAttribute("data-role"))).toEqual([
+      "user",
+      "assistant",
+    ]);
+    expect(items.map((item) => item.textContent)).toEqual(["hi", "hello!"]);
+
+    unmount();
+  });
+
+  it("binds the composer text and submits on Enter", async () => {
+    const { runtime, onNew } = createTestRuntime();
+    const View = defineComponent({
+      setup: () => () => h(ComposerPrimitiveInput),
+    });
+    const { el, unmount } = mountChat(runtime, View);
+
+    const textarea = el.querySelector("textarea")!;
+    textarea.value = "hello";
+    textarea.dispatchEvent(new Event("input"));
+
+    textarea.dispatchEvent(
+      new KeyboardEvent("keydown", { key: "Enter", cancelable: true }),
+    );
+    await vi.waitFor(() => {
+      expect(onNew).toHaveBeenCalledTimes(1);
+    });
+    expect(onNew.mock.calls[0]![0]).toMatchObject({
+      content: [{ type: "text", text: "hello" }],
+    });
+
+    unmount();
+  });
+
+  it("keeps Shift+Enter and IME composition as newlines", async () => {
+    const { runtime, onNew } = createTestRuntime();
+    const View = defineComponent({
+      setup: () => () => h(ComposerPrimitiveInput),
+    });
+    const { el, unmount } = mountChat(runtime, View);
+
+    const textarea = el.querySelector("textarea")!;
+    textarea.value = "hello";
+    textarea.dispatchEvent(new Event("input"));
+
+    const shiftEnter = new KeyboardEvent("keydown", {
+      key: "Enter",
+      shiftKey: true,
+      cancelable: true,
+    });
+    expect(textarea.dispatchEvent(shiftEnter)).toBe(true);
+
+    const composingEnter = new KeyboardEvent("keydown", {
+      key: "Enter",
+      isComposing: true,
+      cancelable: true,
+    });
+    expect(textarea.dispatchEvent(composingEnter)).toBe(true);
+
+    await vi.waitFor(() => {
+      expect(runtime.thread.composer.getState().text).toBe("hello");
+    });
+    expect(onNew).not.toHaveBeenCalled();
+
+    unmount();
+  });
+
+  it("does not submit on Enter when submitOnEnter is false", async () => {
+    const { runtime, onNew } = createTestRuntime();
+    const View = defineComponent({
+      setup: () => () => h(ComposerPrimitiveInput, { submitOnEnter: false }),
+    });
+    const { el, unmount } = mountChat(runtime, View);
+
+    const textarea = el.querySelector("textarea")!;
+    textarea.value = "hello";
+    textarea.dispatchEvent(new Event("input"));
+    const enter = new KeyboardEvent("keydown", {
+      key: "Enter",
+      cancelable: true,
+    });
+    expect(textarea.dispatchEvent(enter)).toBe(true);
+
+    await vi.waitFor(() => {
+      expect(runtime.thread.composer.getState().text).toBe("hello");
+    });
+    expect(onNew).not.toHaveBeenCalled();
+
+    unmount();
+  });
+
+  it("disables the input while the thread is disabled", async () => {
+    const { runtime, setDisabled } = createTestRuntime();
+    const View = defineComponent({
+      setup: () => () => h(ComposerPrimitiveInput),
+    });
+    const { el, unmount } = mountChat(runtime, View);
+
+    expect(el.querySelector("textarea")!.disabled).toBe(false);
+
+    flushTapSync(() => setDisabled(true));
+    await vi.waitFor(async () => {
+      await nextTick();
+      expect(el.querySelector("textarea")!.disabled).toBe(true);
+    });
+
+    unmount();
+  });
+
+  it("names the textarea input unless the caller passes a name", () => {
+    const { runtime } = createTestRuntime();
+    const View = defineComponent({
+      setup: () => () => [
+        h(ComposerPrimitiveInput),
+        h(ComposerPrimitiveInput, { name: "prompt" }),
+      ],
+    });
+    const { el, unmount } = mountChat(runtime, View);
+
+    expect(
+      [...el.querySelectorAll("textarea")].map((textarea) => textarea.name),
+    ).toEqual(["input", "prompt"]);
+
+    unmount();
+  });
+
+  it("cancels a running turn through the cancel button", async () => {
+    const { runtime, setRunning, onCancel } = createTestRuntime();
+    const View = defineComponent({
+      setup: () => () =>
+        h(ComposerPrimitiveCancel, null, { default: () => "Stop" }),
+    });
+    const { el, unmount } = mountChat(runtime, View);
+
+    flushTapSync(() => setRunning(true));
+    const button = el.querySelector("button")!;
+    await vi.waitFor(async () => {
+      await nextTick();
+      expect(button.disabled).toBe(false);
+    });
+
+    button.click();
+    await vi.waitFor(() => {
+      expect(onCancel).toHaveBeenCalledTimes(1);
+    });
+
+    unmount();
+  });
+
+  it("disables send on an empty composer and sends on click", async () => {
+    const { runtime, onNew } = createTestRuntime();
+    const View = defineComponent({
+      setup: () => () => [
+        h(ComposerPrimitiveInput),
+        h(ComposerPrimitiveSend, null, { default: () => "Send" }),
+      ],
+    });
+    const { el, unmount } = mountChat(runtime, View);
+
+    const button = el.querySelector("button")!;
+    expect(button.disabled).toBe(true);
+
+    const textarea = el.querySelector("textarea")!;
+    textarea.value = "hello";
+    textarea.dispatchEvent(new Event("input"));
+    await vi.waitFor(async () => {
+      await nextTick();
+      expect(button.disabled).toBe(false);
+    });
+
+    button.click();
+    await vi.waitFor(() => {
+      expect(onNew).toHaveBeenCalledTimes(1);
+    });
+
+    unmount();
+  });
+
+  it("stays inert for a message edit composer that is not editing", async () => {
+    const { runtime, append, onNew } = createTestRuntime();
+    const View = defineComponent({
+      setup: () => () =>
+        h(ThreadPrimitiveMessages, null, {
+          default: () => h(ComposerPrimitiveInput),
+        }),
+    });
+    const { el, unmount } = mountChat(runtime, View);
+
+    flushTapSync(() => append({ role: "user", text: "hi" }));
+    await vi.waitFor(async () => {
+      await nextTick();
+      expect(el.querySelector("textarea")).not.toBeNull();
+    });
+
+    const textarea = el.querySelector("textarea")!;
+    expect(textarea.value).toBe("");
+    textarea.value = "typing";
+    textarea.dispatchEvent(new Event("input"));
+
+    expect(textarea.value).toBe("");
+    await new Promise((resolve) => setTimeout(resolve));
+    expect(onNew).not.toHaveBeenCalled();
+
+    unmount();
+  });
+
+  it("keeps a caller-disabled send button disabled and inert", async () => {
+    const { runtime, onNew } = createTestRuntime();
+    const View = defineComponent({
+      setup: () => () => [
+        h(ComposerPrimitiveInput),
+        h(
+          ComposerPrimitiveSend,
+          { disabled: true },
+          {
+            default: () => "Send",
+          },
+        ),
+      ],
+    });
+    const { el, unmount } = mountChat(runtime, View);
+
+    const textarea = el.querySelector("textarea")!;
+    textarea.value = "hello";
+    flushTapSync(() => textarea.dispatchEvent(new Event("input")));
+
+    const button = el.querySelector("button")!;
+    await nextTick();
+    expect(button.disabled).toBe(true);
+
+    button.disabled = false;
+    button.click();
+    await new Promise((resolve) => setTimeout(resolve));
+    expect(onNew).not.toHaveBeenCalled();
+
+    unmount();
+  });
+
+  it("disables cancel while the runtime cannot cancel", () => {
+    const runtime = new AssistantRuntimeImpl(
+      new ExternalStoreRuntimeCore({
+        messages: [] as DemoMessage[],
+        convertMessage: (message: DemoMessage) => ({
+          role: message.role,
+          content: [{ type: "text", text: message.text }],
+        }),
+        onNew: async () => {},
+      }),
+    );
+    const View = defineComponent({
+      setup: () => () =>
+        h(ComposerPrimitiveCancel, null, { default: () => "Stop" }),
+    });
+    const { el, unmount } = mountChat(runtime, View);
+
+    expect(el.querySelector("button")!.disabled).toBe(true);
+
+    unmount();
+  });
+});

package/src/__tests__/useAuiEvent.test.ts

@@ -0,0 +1,159 @@
+import { afterEach, describe, expect, it, vi } from "vitest";
+import {
+  computed,
+  createApp,
+  defineComponent,
+  h,
+  ref,
+  type Component,
+} from "vue";
+import { flushTapSync } from "@assistant-ui/tap";
+import { AuiConfig } from "@assistant-ui/store/client";
+import { AuiProvider } from "../AuiProvider";
+import { useAui } from "../useAui";
+import { useAuiEvent } from "../useAuiEvent";
+import {
+  ThreadClient,
+  flushEvents,
+  messageDerived,
+  type AnyClient,
+} from "./fixtures";
+
+const mountWithProvider = (setup: () => void) => {
+  const Probe = defineComponent({
+    setup() {
+      setup();
+      return () => null;
+    },
+  });
+  const app = createApp(
+    defineComponent({
+      setup: () => () =>
+        h(
+          AuiProvider,
+          {
+            config: AuiConfig({
+              thread: ThreadClient(),
+              message: messageDerived(),
+            } as never),
+          },
+          { default: () => h(Probe) },
+        ),
+    }) as Component,
+  );
+  app.mount(document.createElement("div"));
+  return { unmount: () => app.unmount() };
+};
+
+describe("useAuiEvent", () => {
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  it("delivers scope-filtered events on a microtask", async () => {
+    let aui!: AnyClient;
+    const cb = vi.fn();
+    const { unmount } = mountWithProvider(() => {
+      aui = useAui() as AnyClient;
+      useAuiEvent("message.pinged" as never, cb as never);
+    });
+
+    flushTapSync(() => aui.thread.message({ index: 1 }).ping("other"));
+    await flushEvents();
+    expect(cb).not.toHaveBeenCalled();
+
+    flushTapSync(() => aui.message.ping("bound"));
+    await flushEvents();
+    expect(cb).toHaveBeenCalledTimes(1);
+    expect(cb).toHaveBeenCalledWith({ id: "m0", value: "bound" });
+
+    unmount();
+  });
+
+  it("follows the client across structural changes", async () => {
+    let aui!: AnyClient;
+    const cb = vi.fn();
+    const { unmount } = mountWithProvider(() => {
+      aui = useAui() as AnyClient;
+      useAuiEvent("message.pinged" as never, cb as never);
+    });
+
+    flushTapSync(() => aui.thread.setSelected(1));
+
+    flushTapSync(() => aui.message.ping("after-rebind"));
+    await flushEvents();
+    expect(cb).toHaveBeenCalledTimes(1);
+    expect(cb).toHaveBeenCalledWith({ id: "m1", value: "after-rebind" });
+
+    unmount();
+  });
+
+  it("stops delivering after unmount", async () => {
+    let aui!: AnyClient;
+    const cb = vi.fn();
+    const { unmount } = mountWithProvider(() => {
+      aui = useAui() as AnyClient;
+      useAuiEvent("message.pinged" as never, cb as never);
+    });
+
+    unmount();
+
+    flushTapSync(() => aui.thread.message({ index: 0 }).ping("late"));
+    await flushEvents();
+    expect(cb).not.toHaveBeenCalled();
+  });
+  it("binds once its scope appears in a live config, without detaching", async () => {
+    let aui!: AnyClient;
+    const cb = vi.fn();
+    const warnSpy = vi.spyOn(console, "warn").mockImplementation(() => {});
+    const errorSpy = vi.spyOn(console, "error").mockImplementation(() => {});
+    const present = ref(false);
+    const Probe = defineComponent({
+      setup() {
+        aui = useAui() as AnyClient;
+        useAuiEvent("message.pinged" as never, cb as never);
+        return () => null;
+      },
+    });
+    const app = createApp(
+      defineComponent({
+        setup: () => {
+          const config = computed(() =>
+            present.value
+              ? (AuiConfig({
+                  thread: ThreadClient(),
+                  message: messageDerived(),
+                } as never) as never)
+              : (AuiConfig({ thread: ThreadClient() } as never) as never),
+          );
+          return () =>
+            h(
+              AuiProvider,
+              { config: config.value },
+              { default: () => h(Probe) },
+            );
+        },
+      }) as Component,
+    );
+    app.mount(document.createElement("div"));
+
+    try {
+      expect(warnSpy).toHaveBeenCalled();
+      expect(cb).not.toHaveBeenCalled();
+
+      present.value = true;
+      await vi.waitFor(() =>
+        expect((aui.message as AnyClient).getState().id).toBe("m0"),
+      );
+
+      flushTapSync(() => aui.message.ping("hello"));
+      await flushEvents();
+      expect(cb).toHaveBeenCalledWith({ id: "m0", value: "hello" });
+      expect(errorSpy).not.toHaveBeenCalled();
+    } finally {
+      warnSpy.mockRestore();
+      errorSpy.mockRestore();
+      app.unmount();
+    }
+  });
+});

package/src/__tests__/useAuiState.test.ts

@@ -0,0 +1,124 @@
+import { describe, expect, it, vi } from "vitest";
+import {
+  createApp,
+  defineComponent,
+  h,
+  nextTick,
+  watch,
+  type Component,
+  type ComputedRef,
+} from "vue";
+import { flushTapSync } from "@assistant-ui/tap";
+import { AuiConfig } from "@assistant-ui/store/client";
+import { AuiProvider } from "../AuiProvider";
+import { useAui } from "../useAui";
+import { useAuiState } from "../useAuiState";
+import { ThreadClient, messageDerived, type AnyClient } from "./fixtures";
+
+const mountWithProvider = (setup: () => void) => {
+  const Probe = defineComponent({
+    setup() {
+      setup();
+      return () => null;
+    },
+  });
+  const app = createApp(
+    defineComponent({
+      setup: () => () =>
+        h(
+          AuiProvider,
+          {
+            config: AuiConfig({
+              thread: ThreadClient(),
+              message: messageDerived(),
+            } as never),
+          },
+          { default: () => h(Probe) },
+        ),
+    }) as Component,
+  );
+  app.mount(document.createElement("div"));
+  return { unmount: () => app.unmount() };
+};
+
+describe("useAuiState", () => {
+  it("selects state and updates when the store notifies", () => {
+    let aui!: AnyClient;
+    let selected!: ComputedRef<number>;
+    const { unmount } = mountWithProvider(() => {
+      aui = useAui() as AnyClient;
+      selected = useAuiState((s) => (s as AnyClient).thread.selected);
+    });
+
+    expect(selected.value).toBe(0);
+
+    flushTapSync(() => aui.thread.setSelected(1));
+    expect(selected.value).toBe(1);
+
+    unmount();
+  });
+
+  it("updates through the real scheduler without a manual flush", async () => {
+    let aui!: AnyClient;
+    let selected!: ComputedRef<number>;
+    const { unmount } = mountWithProvider(() => {
+      aui = useAui() as AnyClient;
+      selected = useAuiState((s) => (s as AnyClient).thread.selected);
+    });
+
+    aui.thread.setSelected(1);
+    // The tap scheduler flushes on a MessageChannel macrotask whose ordering
+    // against timers is unspecified; poll instead of racing a single timer
+    await vi.waitFor(() => {
+      expect(selected.value).toBe(1);
+    });
+
+    unmount();
+  });
+
+  it("re-runs watchers only when the slice changes by Object.is", async () => {
+    let aui!: AnyClient;
+    let id!: ComputedRef<string>;
+    const watcher = vi.fn();
+    const { unmount } = mountWithProvider(() => {
+      aui = useAui() as AnyClient;
+      id = useAuiState((s) => (s as AnyClient).message.id);
+      watch(id, watcher);
+    });
+
+    flushTapSync(() => aui.thread.message({ index: 0 }).setText("hello"));
+    await nextTick();
+    expect(watcher).not.toHaveBeenCalled();
+
+    flushTapSync(() => aui.thread.setSelected(1));
+    await nextTick();
+    expect(watcher).toHaveBeenCalledTimes(1);
+    expect(id.value).toBe("m1");
+
+    unmount();
+  });
+
+  it("throws when the selector returns the whole state", () => {
+    let state!: ComputedRef<unknown>;
+    const { unmount } = mountWithProvider(() => {
+      state = useAuiState((s) => s);
+    });
+
+    expect(() => state.value).toThrow(
+      "You tried to return the entire AssistantState.",
+    );
+
+    unmount();
+  });
+
+  it("resolves unavailable scopes to undefined via optional", () => {
+    let missing!: ComputedRef<unknown>;
+    const { unmount } = mountWithProvider(() => {
+      missing = useAuiState((s) => (s.optional as AnyClient).missing);
+    });
+
+    expect(missing.value).toBeUndefined();
+
+    unmount();
+  });
+});

package/src/context.ts

@@ -0,0 +1,31 @@
+import { inject, type InjectionKey } from "vue";
+import {
+  createClientFacade,
+  DefaultAssistantClient,
+  type AssistantClient,
+  type AssistantClientSource,
+} from "@assistant-ui/store/client";
+
+export type AuiContext = {
+  source: AssistantClientSource;
+  aui: AssistantClient;
+};
+
+export const auiInjectionKey: InjectionKey<AuiContext> = Symbol(
+  "assistant-ui.vue.aui",
+);
+
+const NO_OP_SUBSCRIBE = () => () => {};
+
+const defaultContext: AuiContext = {
+  source: {
+    getClient: () => DefaultAssistantClient,
+    subscribe: NO_OP_SUBSCRIBE,
+  },
+  aui: DefaultAssistantClient,
+};
+
+export const useAuiContext = (): AuiContext =>
+  inject(auiInjectionKey, defaultContext);
+
+export { createClientFacade };