@assistant-ui/vue 0.0.0-stage → 0.0.1

package/src/primitives/ThreadPrimitiveViewportFooter.test.ts

@@ -0,0 +1,305 @@
+import { afterEach, describe, expect, it, vi } from "vitest";
+import {
+  createApp,
+  defineComponent,
+  h,
+  nextTick,
+  ref,
+  type Component,
+} from "vue";
+import { AuiConfig } from "@assistant-ui/store/client";
+import { RuntimeAdapter } from "@assistant-ui/core/store";
+import {
+  AssistantRuntimeImpl,
+  ExternalStoreRuntimeCore,
+} from "@assistant-ui/core/internal";
+import { AuiProvider } from "../AuiProvider";
+import { ThreadPrimitiveScrollToBottom } from "./ThreadPrimitiveScrollToBottom";
+import { ThreadPrimitiveViewport } from "./ThreadPrimitiveViewport";
+import { ThreadPrimitiveViewportFooter } from "./ThreadPrimitiveViewportFooter";
+
+const geometryElements = new Set<HTMLElement>();
+
+const createTestRuntime = () =>
+  new AssistantRuntimeImpl(
+    new ExternalStoreRuntimeCore({
+      messages: [],
+      convertMessage: () => ({ role: "user", content: [] }),
+      onNew: async () => {},
+    }),
+  );
+
+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() };
+};
+
+const installViewportGeometry = (div: HTMLElement) => {
+  let scrollHeight = 500;
+  let scrollTop = 0;
+  const clientHeight = 100;
+  geometryElements.add(div);
+  Object.defineProperty(div, "scrollHeight", {
+    get: () => scrollHeight,
+    configurable: true,
+  });
+  Object.defineProperty(div, "clientHeight", {
+    get: () => clientHeight,
+    configurable: true,
+  });
+  Object.defineProperty(div, "scrollTop", {
+    get: () => scrollTop,
+    set: (value: number) => {
+      scrollTop = value;
+    },
+    configurable: true,
+  });
+  const scrollTo = vi.fn(({ top }: ScrollToOptions) => {
+    scrollTop = Math.max(0, Math.min(top ?? 0, scrollHeight - clientHeight));
+    div.dispatchEvent(new Event("scroll"));
+  });
+  Object.defineProperty(div, "scrollTo", {
+    value: scrollTo,
+    configurable: true,
+  });
+  return {
+    scrollTo,
+    setScrollHeight: (value: number) => {
+      scrollHeight = value;
+    },
+    setScrollTop: (value: number) => {
+      scrollTop = value;
+    },
+  };
+};
+
+const installResizeObserver = () => {
+  const observers = new Set<ResizeObserverMock>();
+  class ResizeObserverMock {
+    element: Element | null = null;
+    readonly callback: ResizeObserverCallback;
+
+    constructor(callback: ResizeObserverCallback) {
+      this.callback = callback;
+      observers.add(this);
+    }
+
+    observe(element: Element) {
+      this.element = element;
+    }
+
+    unobserve() {}
+
+    disconnect() {
+      observers.delete(this);
+    }
+
+    takeRecords() {
+      return [];
+    }
+
+    trigger() {
+      this.callback([], this);
+    }
+  }
+  vi.stubGlobal("ResizeObserver", ResizeObserverMock);
+  return {
+    trigger: (element: Element) => {
+      for (const observer of observers) {
+        if (observer.element === element) observer.trigger();
+      }
+    },
+  };
+};
+
+afterEach(() => {
+  vi.restoreAllMocks();
+  vi.unstubAllGlobals();
+  for (const element of geometryElements) {
+    Reflect.deleteProperty(element, "scrollHeight");
+    Reflect.deleteProperty(element, "clientHeight");
+    Reflect.deleteProperty(element, "scrollTop");
+    Reflect.deleteProperty(element, "scrollTo");
+  }
+  geometryElements.clear();
+});
+
+describe("ThreadPrimitiveViewportFooter", () => {
+  it("registers its height and unregisters it when removed", async () => {
+    const observers = installResizeObserver();
+    const showFooter = ref(true);
+    const View = defineComponent({
+      setup: () => () =>
+        h(
+          ThreadPrimitiveViewport,
+          { class: "viewport" },
+          {
+            default: () => [
+              showFooter.value
+                ? h(ThreadPrimitiveViewportFooter, { class: "footer" })
+                : null,
+              h(
+                ThreadPrimitiveScrollToBottom,
+                { class: "jump" },
+                { default: () => "Jump" },
+              ),
+            ],
+          },
+        ),
+    });
+    const { el, unmount } = mountChat(createTestRuntime(), View);
+    const div = el.querySelector<HTMLElement>("div.viewport")!;
+    const geometry = installViewportGeometry(div);
+    const footer = el.querySelector<HTMLElement>("div.footer")!;
+    Object.defineProperty(footer, "offsetHeight", {
+      get: () => 50,
+      configurable: true,
+    });
+    div.dispatchEvent(new Event("scroll"));
+    observers.trigger(footer);
+    await nextTick();
+
+    geometry.setScrollTop(355);
+    div.dispatchEvent(new Event("scroll"));
+    await nextTick();
+    expect(el.querySelector<HTMLButtonElement>("button.jump")!.disabled).toBe(
+      true,
+    );
+
+    showFooter.value = false;
+    await nextTick();
+    div.dispatchEvent(new Event("scroll"));
+    await nextTick();
+    expect(el.querySelector<HTMLButtonElement>("button.jump")!.disabled).toBe(
+      false,
+    );
+
+    Reflect.deleteProperty(footer, "offsetHeight");
+    unmount();
+  });
+
+  it("sums the heights of multiple footers", async () => {
+    const observers = installResizeObserver();
+    const showSecond = ref(true);
+    const View = defineComponent({
+      setup: () => () =>
+        h(
+          ThreadPrimitiveViewport,
+          { class: "viewport" },
+          {
+            default: () => [
+              h(ThreadPrimitiveViewportFooter, { class: "first-footer" }),
+              showSecond.value
+                ? h(ThreadPrimitiveViewportFooter, { class: "second-footer" })
+                : null,
+              h(
+                ThreadPrimitiveScrollToBottom,
+                { class: "jump" },
+                { default: () => "Jump" },
+              ),
+            ],
+          },
+        ),
+    });
+    const { el, unmount } = mountChat(createTestRuntime(), View);
+    const div = el.querySelector<HTMLElement>("div.viewport")!;
+    const geometry = installViewportGeometry(div);
+    const firstFooter = el.querySelector<HTMLElement>("div.first-footer")!;
+    const secondFooter = el.querySelector<HTMLElement>("div.second-footer")!;
+    Object.defineProperty(firstFooter, "offsetHeight", {
+      get: () => 20,
+      configurable: true,
+    });
+    Object.defineProperty(secondFooter, "offsetHeight", {
+      get: () => 30,
+      configurable: true,
+    });
+    div.dispatchEvent(new Event("scroll"));
+    observers.trigger(firstFooter);
+    observers.trigger(secondFooter);
+    await nextTick();
+
+    geometry.setScrollTop(355);
+    div.dispatchEvent(new Event("scroll"));
+    await nextTick();
+    expect(el.querySelector<HTMLButtonElement>("button.jump")!.disabled).toBe(
+      true,
+    );
+
+    showSecond.value = false;
+    await nextTick();
+    div.dispatchEvent(new Event("scroll"));
+    await nextTick();
+    expect(el.querySelector<HTMLButtonElement>("button.jump")!.disabled).toBe(
+      false,
+    );
+
+    Reflect.deleteProperty(firstFooter, "offsetHeight");
+    Reflect.deleteProperty(secondFooter, "offsetHeight");
+    unmount();
+  });
+
+  it("follows a footer growth while pinned at the bottom", async () => {
+    const observers = installResizeObserver();
+    let footerHeight = 50;
+    const View = defineComponent({
+      setup: () => () =>
+        h(
+          ThreadPrimitiveViewport,
+          { class: "viewport" },
+          {
+            default: () => [
+              h(ThreadPrimitiveViewportFooter, { class: "footer" }),
+              h(
+                ThreadPrimitiveScrollToBottom,
+                { class: "jump" },
+                { default: () => "Jump" },
+              ),
+            ],
+          },
+        ),
+    });
+    const { el, unmount } = mountChat(createTestRuntime(), View);
+    const div = el.querySelector<HTMLElement>("div.viewport")!;
+    const geometry = installViewportGeometry(div);
+    const footer = el.querySelector<HTMLElement>("div.footer")!;
+    Object.defineProperty(footer, "offsetHeight", {
+      get: () => footerHeight,
+      configurable: true,
+    });
+    geometry.setScrollTop(400);
+    div.dispatchEvent(new Event("scroll"));
+    observers.trigger(footer);
+    await nextTick();
+    expect(geometry.scrollTo).toHaveBeenCalledWith({
+      top: 500,
+      behavior: "instant",
+    });
+
+    geometry.scrollTo.mockClear();
+    footerHeight = 80;
+    observers.trigger(footer);
+    await nextTick();
+    expect(geometry.scrollTo).toHaveBeenCalledWith({
+      top: 500,
+      behavior: "instant",
+    });
+    expect(el.querySelector<HTMLButtonElement>("button.jump")!.disabled).toBe(
+      true,
+    );
+
+    Reflect.deleteProperty(footer, "offsetHeight");
+    unmount();
+  });
+});

package/src/primitives/ThreadPrimitiveViewportFooter.ts

@@ -0,0 +1,60 @@
+import {
+  defineComponent,
+  h,
+  inject,
+  mergeProps,
+  onMounted,
+  onScopeDispose,
+  shallowRef,
+  type SlotsType,
+  type VNodeChild,
+} from "vue";
+import { viewportInjectionKey } from "./viewportContext";
+
+/**
+ * A footer container that measures its height into the viewport's content
+ * inset. Positions within the summed inset of the native bottom count as at
+ * bottom, and a growing inset re-follows a pinned viewport. Multiple footers
+ * sum. Typically used with `class="sticky bottom-0"`.
+ */
+export const ThreadPrimitiveViewportFooter = defineComponent({
+  name: "ThreadPrimitiveViewportFooter",
+  inheritAttrs: false,
+  slots: Object as SlotsType<{ default?: () => VNodeChild[] }>,
+  setup(_, { attrs, slots }) {
+    const viewport = inject(viewportInjectionKey, null);
+    const divRef = shallowRef<HTMLElement | null>(null);
+    let dispose: (() => void) | undefined;
+
+    onMounted(() => {
+      const div = divRef.value;
+      if (!div || !viewport) return;
+
+      const contentInset = viewport.registerContentInset();
+      const updateHeight = () => {
+        const marginTop =
+          Number.parseFloat(getComputedStyle(div).marginTop) || 0;
+        contentInset.setHeight(div.offsetHeight + marginTop);
+      };
+      updateHeight();
+
+      let resizeObserver: ResizeObserver | undefined;
+      if (typeof ResizeObserver !== "undefined") {
+        resizeObserver = new ResizeObserver(updateHeight);
+        resizeObserver.observe(div);
+      }
+
+      dispose = () => {
+        resizeObserver?.disconnect();
+        contentInset.unregister();
+      };
+    });
+
+    onScopeDispose(() => {
+      dispose?.();
+    });
+
+    return () =>
+      h("div", mergeProps(attrs, { ref: divRef }), slots.default?.());
+  },
+});

package/src/primitives/actionBar.ts

@@ -0,0 +1,159 @@
+import {
+  defineComponent,
+  h,
+  mergeProps,
+  onScopeDispose,
+  type SlotsType,
+  type VNodeChild,
+} from "vue";
+import { flushTapSync } from "@assistant-ui/tap";
+import {
+  actionBarCopyDisabled,
+  actionBarEditDisabled,
+  actionBarReloadDisabled,
+} from "@assistant-ui/core/store/internal";
+import { isAttrDisabled } from "./attrDisabled";
+import { useAui } from "../useAui";
+import { useAuiState } from "../useAuiState";
+
+/** A button that begins editing the current message. Disabled while editing. */
+export const ActionBarPrimitiveEdit = defineComponent({
+  name: "ActionBarPrimitiveEdit",
+  inheritAttrs: false,
+  slots: Object as SlotsType<{ default?: () => VNodeChild[] }>,
+  setup(_, { attrs, slots }) {
+    const aui = useAui();
+    const disabled = useAuiState(actionBarEditDisabled);
+    const onClick = (event: MouseEvent) => {
+      if (event.defaultPrevented || disabled.value || isAttrDisabled(attrs))
+        return;
+      aui.composer.beginEdit();
+    };
+    return () =>
+      h(
+        "button",
+        mergeProps(attrs, {
+          type: "button",
+          disabled: disabled.value || isAttrDisabled(attrs),
+          onClick,
+        }),
+        slots.default?.(),
+      );
+  },
+});
+
+/**
+ * A button that regenerates the current assistant message. Disabled while a
+ * run is in flight, the thread is disabled, or the message is not an
+ * assistant message.
+ */
+export const ActionBarPrimitiveReload = defineComponent({
+  name: "ActionBarPrimitiveReload",
+  inheritAttrs: false,
+  slots: Object as SlotsType<{ default?: () => VNodeChild[] }>,
+  setup(_, { attrs, slots }) {
+    const aui = useAui();
+    const disabled = useAuiState(actionBarReloadDisabled);
+    const onClick = (event: MouseEvent) => {
+      if (event.defaultPrevented || disabled.value || isAttrDisabled(attrs))
+        return;
+      aui.message.reload();
+    };
+    return () =>
+      h(
+        "button",
+        mergeProps(attrs, {
+          type: "button",
+          disabled: disabled.value || isAttrDisabled(attrs),
+          onClick,
+        }),
+        slots.default?.(),
+      );
+  },
+});
+
+const defaultCopyToClipboard = (text: string) => {
+  if (typeof navigator === "undefined" || !navigator.clipboard) {
+    return Promise.reject(new Error("Clipboard API is not available."));
+  }
+  return navigator.clipboard.writeText(text);
+};
+
+/**
+ * A button that copies the current message (or, while editing, the edit
+ * composer text). `data-copied` is present for `copiedDuration` milliseconds
+ * after a successful copy. Disabled while an assistant message is still
+ * running or the message has no text.
+ */
+export const ActionBarPrimitiveCopy = defineComponent({
+  name: "ActionBarPrimitiveCopy",
+  inheritAttrs: false,
+  props: {
+    copiedDuration: {
+      type: Number,
+      default: 3000,
+    },
+  },
+  slots: Object as SlotsType<{ default?: () => VNodeChild[] }>,
+  setup(props, { attrs, slots }) {
+    const aui = useAui();
+    const disabled = useAuiState(actionBarCopyDisabled);
+    const isCopied = useAuiState((s) => s.message.isCopied);
+    const isEditing = useAuiState((s) => s.composer.isEditing);
+    const composerText = useAuiState((s) => s.composer.text);
+
+    let copiedTimer: ReturnType<typeof setTimeout> | undefined;
+    let disposed = false;
+    onScopeDispose(() => {
+      disposed = true;
+      if (copiedTimer === undefined) return;
+      clearTimeout(copiedTimer);
+      copiedTimer = undefined;
+      aui.message.setIsCopied(false);
+    });
+
+    const onClick = (event: MouseEvent) => {
+      if (event.defaultPrevented || disabled.value || isAttrDisabled(attrs))
+        return;
+      const value = isEditing.value
+        ? composerText.value
+        : aui.message.getCopyText();
+      if (!value) return;
+      // A by-index scope follows whatever message occupies the slot, so late
+      // completions and timers re-check the copied message's id before
+      // touching state.
+      const copiedMessageId = aui.message.getState().id;
+      const stillCopiedMessage = () =>
+        !disposed && aui.message.getState().id === copiedMessageId;
+      // The rejection handler swallows clipboard write failures (permission
+      // denied, API unavailable) so they don't surface as unhandled promise
+      // rejections.
+      Promise.resolve(defaultCopyToClipboard(value)).then(
+        () => {
+          if (!stillCopiedMessage()) return;
+          if (copiedTimer !== undefined) clearTimeout(copiedTimer);
+          flushTapSync(() => aui.message.setIsCopied(true));
+          copiedTimer = setTimeout(() => {
+            copiedTimer = undefined;
+            if (stillCopiedMessage()) {
+              flushTapSync(() => aui.message.setIsCopied(false));
+            }
+          }, props.copiedDuration);
+        },
+        () => {},
+      );
+    };
+
+    return () =>
+      h(
+        "button",
+        mergeProps(attrs, {
+          type: "button",
+          disabled: disabled.value || isAttrDisabled(attrs),
+          ...(isCopied.value && { "data-copied": "" }),
+          onClick,
+        }),
+        slots.default?.(),
+      );
+  },
+});

package/src/primitives/attachment.ts

@@ -0,0 +1,76 @@
+import {
+  defineComponent,
+  h,
+  mergeProps,
+  type SlotsType,
+  type VNodeChild,
+} from "vue";
+import { isAttrDisabled } from "./attrDisabled";
+import { useAui } from "../useAui";
+import { useAuiState } from "../useAuiState";
+
+/** A wrapper element scoped to the current attachment. */
+export const AttachmentPrimitiveRoot = defineComponent({
+  name: "AttachmentPrimitiveRoot",
+  inheritAttrs: false,
+  slots: Object as SlotsType<{ default?: () => VNodeChild[] }>,
+  setup(_, { attrs, slots }) {
+    return () => h("div", mergeProps(attrs, {}), slots.default?.());
+  },
+});
+
+/** Renders the current attachment's file name as raw text. */
+export const AttachmentPrimitiveName = defineComponent({
+  name: "AttachmentPrimitiveName",
+  slots: Object as SlotsType<{ default?: () => VNodeChild[] }>,
+  setup(_, { slots }) {
+    const name = useAuiState((s) => s.attachment.name);
+    return () => slots.default?.() ?? name.value;
+  },
+});
+
+/**
+ * Renders a short label for the current attachment: the file extension when
+ * the name has one, otherwise the attachment type.
+ */
+export const AttachmentPrimitiveThumb = defineComponent({
+  name: "AttachmentPrimitiveThumb",
+  inheritAttrs: false,
+  slots: Object as SlotsType<{ default?: () => VNodeChild[] }>,
+  setup(_, { attrs, slots }) {
+    const label = useAuiState((s) => {
+      const name = s.attachment.name;
+      const dot = name.lastIndexOf(".");
+      if (dot > 0 && dot < name.length - 1) {
+        return `.${name.slice(dot + 1)}`;
+      }
+      return s.attachment.type;
+    });
+    return () =>
+      h("div", mergeProps(attrs, {}), slots.default?.() ?? label.value);
+  },
+});
+
+/** A button that removes the current attachment. */
+export const AttachmentPrimitiveRemove = defineComponent({
+  name: "AttachmentPrimitiveRemove",
+  inheritAttrs: false,
+  slots: Object as SlotsType<{ default?: () => VNodeChild[] }>,
+  setup(_, { attrs, slots }) {
+    const aui = useAui();
+    const onClick = (event: MouseEvent) => {
+      if (event.defaultPrevented || isAttrDisabled(attrs)) return;
+      void aui.attachment.remove();
+    };
+    return () =>
+      h(
+        "button",
+        mergeProps(attrs, {
+          type: "button",
+          disabled: isAttrDisabled(attrs),
+          onClick,
+        }),
+        slots.default?.(),
+      );
+  },
+});

package/src/primitives/attrDisabled.ts

@@ -0,0 +1,6 @@
+// A bare `disabled` template attribute arrives as "", which Boolean() would
+// drop; mirror Vue's boolean-attribute semantics instead.
+export const isAttrDisabled = (attrs: Record<string, unknown>): boolean =>
+  attrs.disabled != null &&
+  attrs.disabled !== false &&
+  attrs.disabled !== "false";

package/src/primitives/branchPicker.ts

@@ -0,0 +1,77 @@
+import {
+  defineComponent,
+  h,
+  mergeProps,
+  type ComputedRef,
+  type SlotsType,
+  type VNodeChild,
+} from "vue";
+import {
+  branchPickerNextDisabled,
+  branchPickerPreviousDisabled,
+} from "@assistant-ui/core/store/internal";
+import { isAttrDisabled } from "./attrDisabled";
+import { useAui } from "../useAui";
+import { useAuiState } from "../useAuiState";
+
+const branchButton = (
+  name: string,
+  useDisabled: () => ComputedRef<boolean>,
+  position: "previous" | "next",
+) =>
+  defineComponent({
+    name,
+    inheritAttrs: false,
+    slots: Object as SlotsType<{ default?: () => VNodeChild[] }>,
+    setup(_, { attrs, slots }) {
+      const aui = useAui();
+      const disabled = useDisabled();
+      const onClick = (event: MouseEvent) => {
+        if (event.defaultPrevented || disabled.value || isAttrDisabled(attrs))
+          return;
+        aui.message.switchToBranch({ position });
+      };
+      return () =>
+        h(
+          "button",
+          mergeProps(attrs, {
+            type: "button",
+            disabled: disabled.value || isAttrDisabled(attrs),
+            onClick,
+          }),
+          slots.default?.(),
+        );
+    },
+  });
+
+/** A button that switches the current message to its previous branch. */
+export const BranchPickerPrimitivePrevious = branchButton(
+  "BranchPickerPrimitivePrevious",
+  () => useAuiState(branchPickerPreviousDisabled),
+  "previous",
+);
+
+/** A button that switches the current message to its next branch. */
+export const BranchPickerPrimitiveNext = branchButton(
+  "BranchPickerPrimitiveNext",
+  () => useAuiState(branchPickerNextDisabled),
+  "next",
+);
+
+/** Renders the current message's 1-based branch number as text. */
+export const BranchPickerPrimitiveNumber = defineComponent({
+  name: "BranchPickerPrimitiveNumber",
+  setup() {
+    const branchNumber = useAuiState((s) => s.message.branchNumber);
+    return () => String(branchNumber.value);
+  },
+});
+
+/** Renders the current message's branch count as text. */
+export const BranchPickerPrimitiveCount = defineComponent({
+  name: "BranchPickerPrimitiveCount",
+  setup() {
+    const branchCount = useAuiState((s) => s.message.branchCount);
+    return () => String(branchCount.value);
+  },
+});