@assistant-ui/vue 0.0.0-stage → 0.0.1

package/src/primitives/threadList.ts

@@ -0,0 +1,163 @@
+import {
+  computed,
+  defineComponent,
+  h,
+  mergeProps,
+  onScopeDispose,
+  type SlotsType,
+  type VNodeChild,
+} from "vue";
+import { AuiConfig, Derived } from "@assistant-ui/store/client";
+import type { ThreadListItemMethods } from "@assistant-ui/core/store";
+import { AuiProvider } from "../AuiProvider";
+import { isAttrDisabled } from "./attrDisabled";
+import { createLastValidCache, createStaleReporter } from "./lastValidCache";
+import { useAui } from "../useAui";
+import { useAuiState } from "../useAuiState";
+export { ThreadListItemPrimitiveTrigger } from "./ThreadListItemPrimitiveTrigger";
+
+/**
+ * Scopes the subtree to the thread-list item at `index`: descendants read it
+ * through `s.threadListItem`.
+ */
+export const ThreadListItemByIndexProvider = defineComponent({
+  name: "ThreadListItemByIndexProvider",
+  props: {
+    index: {
+      type: Number,
+      required: true,
+    },
+    archived: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  slots: Object as SlotsType<{ default?: () => VNodeChild[] }>,
+  setup(props, { slots }) {
+    const aui = useAui();
+    let disposed = false;
+    onScopeDispose(() => {
+      disposed = true;
+    });
+    const config = computed(() => {
+      const index = props.index;
+      const archived = props.archived;
+      const idsOf = (state: {
+        archivedThreadIds: readonly string[];
+        threadIds: readonly string[];
+      }) => (archived ? state.archivedThreadIds : state.threadIds);
+      const cache = createLastValidCache<ThreadListItemMethods>(
+        createStaleReporter({
+          name: "ThreadListItemByIndexProvider",
+          index,
+          isCurrent: () =>
+            !disposed && index === props.index && archived === props.archived,
+          isValid: () => index < idsOf(aui.threads.getState()).length,
+        }),
+      );
+      return AuiConfig({
+        threadListItem: Derived({
+          source: "threads",
+          query: {
+            type: "index",
+            index,
+            archived,
+          },
+          get: (aui) =>
+            cache.resolve(index < idsOf(aui.threads.getState()).length, () =>
+              aui.threads.item({ index, archived }),
+            ),
+        }),
+      });
+    });
+    return () =>
+      h(
+        AuiProvider,
+        { config: config.value, extends: aui },
+        { default: () => slots.default?.() },
+      );
+  },
+});
+
+/**
+ * Renders the default slot once per thread in the list (or per archived
+ * thread with `archived`), each instance scoped through
+ * {@link ThreadListItemByIndexProvider}.
+ */
+export const ThreadListPrimitiveItems = defineComponent({
+  name: "ThreadListPrimitiveItems",
+  props: {
+    archived: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  slots: Object as SlotsType<{ default?: () => VNodeChild[] }>,
+  setup(props, { slots }) {
+    const threadIds = useAuiState((s) =>
+      props.archived ? s.threads.archivedThreadIds : s.threads.threadIds,
+    );
+    return () =>
+      threadIds.value.map((threadId, index) =>
+        h(
+          ThreadListItemByIndexProvider,
+          { index, archived: props.archived, key: threadId },
+          { default: () => slots.default?.() },
+        ),
+      );
+  },
+});
+
+/**
+ * A button that switches to a new thread. Carries `data-active` and
+ * `aria-current` while the new thread is the main one.
+ */
+export const ThreadListPrimitiveNew = defineComponent({
+  name: "ThreadListPrimitiveNew",
+  inheritAttrs: false,
+  slots: Object as SlotsType<{ default?: () => VNodeChild[] }>,
+  setup(_, { attrs, slots }) {
+    const aui = useAui();
+    const active = useAuiState(
+      (s) => s.threads.newThreadId === s.threads.mainThreadId,
+    );
+    const onClick = (event: MouseEvent) => {
+      if (event.defaultPrevented || isAttrDisabled(attrs)) return;
+      aui.threads.switchToNewThread();
+    };
+    return () =>
+      h(
+        "button",
+        mergeProps(attrs, {
+          type: "button",
+          disabled: isAttrDisabled(attrs),
+          ...(active.value && {
+            "data-active": "true",
+            "aria-current": "true",
+          }),
+          onClick,
+        }),
+        slots.default?.(),
+      );
+  },
+});
+
+/**
+ * Renders the current thread-list item's title. When the title is empty,
+ * renders the default slot, or the `fallback` string.
+ */
+export const ThreadListItemPrimitiveTitle = defineComponent({
+  name: "ThreadListItemPrimitiveTitle",
+  props: {
+    fallback: {
+      type: String,
+      default: "",
+    },
+  },
+  slots: Object as SlotsType<{ default?: () => VNodeChild[] }>,
+  setup(props, { slots }) {
+    const title = useAuiState((s) => s.threadListItem.title);
+    return () =>
+      title.value || (slots.default ? slots.default() : props.fallback);
+  },
+});

package/src/primitives/threadListFocusGroup.ts

@@ -0,0 +1,56 @@
+import {
+  inject,
+  provide,
+  shallowRef,
+  type InjectionKey,
+  type ShallowRef,
+} from "vue";
+
+type ThreadListCollection = {
+  registerTrigger: (key: symbol, trigger: HTMLButtonElement) => () => void;
+  getTriggers: () => HTMLButtonElement[];
+};
+
+type ThreadListItemFocus = {
+  trigger: ShallowRef<HTMLButtonElement | null>;
+};
+
+const threadListCollectionKey: InjectionKey<ThreadListCollection> = Symbol(
+  "assistant-ui.vue.thread-list-collection",
+);
+
+const threadListItemFocusKey: InjectionKey<ThreadListItemFocus> = Symbol(
+  "assistant-ui.vue.thread-list-item-focus",
+);
+
+export const provideThreadListCollection = () => {
+  const triggers = new Map<symbol, HTMLButtonElement>();
+  const collection: ThreadListCollection = {
+    registerTrigger: (key, trigger) => {
+      triggers.set(key, trigger);
+      return () => {
+        if (triggers.get(key) === trigger) triggers.delete(key);
+      };
+    },
+    getTriggers: () =>
+      [...triggers.values()].sort((first, second) => {
+        const position = first.compareDocumentPosition(second);
+        if (position & Node.DOCUMENT_POSITION_FOLLOWING) return -1;
+        if (position & Node.DOCUMENT_POSITION_PRECEDING) return 1;
+        return 0;
+      }),
+  };
+  provide(threadListCollectionKey, collection);
+};
+
+export const useThreadListCollection = () =>
+  inject(threadListCollectionKey, null);
+
+export const provideThreadListItemFocus = (): ThreadListItemFocus => {
+  const focus = { trigger: shallowRef<HTMLButtonElement | null>(null) };
+  provide(threadListItemFocusKey, focus);
+  return focus;
+};
+
+export const useThreadListItemFocus = () =>
+  inject(threadListItemFocusKey, null);

package/src/primitives/threadListStructural.ts

@@ -0,0 +1,86 @@
+import {
+  defineComponent,
+  h,
+  mergeProps,
+  type SlotsType,
+  type VNodeChild,
+} from "vue";
+import type { AssistantClient } from "@assistant-ui/store/client";
+import { threadListLoadMoreDisabled } from "@assistant-ui/core/store/internal";
+import { isAttrDisabled } from "./attrDisabled";
+import { useAui } from "../useAui";
+import { useAuiState } from "../useAuiState";
+
+/**
+ * A button that loads more threads. Stays mounted and disabled while no
+ * more threads are available or a load is in flight.
+ */
+export const ThreadListPrimitiveLoadMore = defineComponent({
+  name: "ThreadListPrimitiveLoadMore",
+  inheritAttrs: false,
+  slots: Object as SlotsType<{ default?: () => VNodeChild[] }>,
+  setup(_, { attrs, slots }) {
+    const aui = useAui();
+    const disabled = useAuiState(threadListLoadMoreDisabled);
+    const onClick = (event: MouseEvent) => {
+      if (event.defaultPrevented || disabled.value || isAttrDisabled(attrs))
+        return;
+      void aui.threads.loadMore();
+    };
+    return () =>
+      h(
+        "button",
+        mergeProps(attrs, {
+          type: "button",
+          disabled: disabled.value || isAttrDisabled(attrs),
+          onClick,
+        }),
+        slots.default?.(),
+      );
+  },
+});
+
+const threadListItemAction = (
+  name: string,
+  action: (aui: AssistantClient) => void,
+) =>
+  defineComponent({
+    name,
+    inheritAttrs: false,
+    slots: Object as SlotsType<{ default?: () => VNodeChild[] }>,
+    setup(_, { attrs, slots }) {
+      const aui = useAui();
+      const onClick = (event: MouseEvent) => {
+        if (event.defaultPrevented || isAttrDisabled(attrs)) return;
+        action(aui);
+      };
+      return () =>
+        h(
+          "button",
+          mergeProps(attrs, {
+            type: "button",
+            disabled: isAttrDisabled(attrs),
+            onClick,
+          }),
+          slots.default?.(),
+        );
+    },
+  });
+
+/** A button that archives the current thread list item. */
+export const ThreadListItemPrimitiveArchive = threadListItemAction(
+  "ThreadListItemPrimitiveArchive",
+  (aui) => aui.threadListItem.archive(),
+);
+
+/** A button that unarchives the current thread list item. */
+export const ThreadListItemPrimitiveUnarchive = threadListItemAction(
+  "ThreadListItemPrimitiveUnarchive",
+  (aui) => aui.threadListItem.unarchive(),
+);
+
+/** A button that deletes the current thread list item. */
+export const ThreadListItemPrimitiveDelete = threadListItemAction(
+  "ThreadListItemPrimitiveDelete",
+  (aui) => aui.threadListItem.delete(),
+);

package/src/primitives/useComposerSendState.ts

@@ -0,0 +1,13 @@
+import type { ComputedRef } from "vue";
+import { useAui } from "../useAui";
+import { composerSendDisabled } from "@assistant-ui/core/store/internal";
+import { useAuiState } from "../useAuiState";
+
+export const useComposerSendState = (): {
+  disabled: ComputedRef<boolean>;
+  send: () => void;
+} => {
+  const aui = useAui();
+  const disabled = useAuiState(composerSendDisabled);
+  return { disabled, send: () => aui.composer.send() };
+};

package/src/primitives/viewportContext.ts

@@ -0,0 +1,16 @@
+import type { InjectionKey, ShallowRef } from "vue";
+
+export type ViewportContentInsetHandle = {
+  setHeight: (height: number) => void;
+  unregister: () => void;
+};
+
+export type ViewportContext = {
+  isAtBottom: ShallowRef<boolean>;
+  scrollToBottom: (behavior?: ScrollBehavior) => void;
+  registerContentInset: () => ViewportContentInsetHandle;
+};
+
+export const viewportInjectionKey: InjectionKey<ViewportContext> = Symbol(
+  "assistant-ui.vue.viewport",
+);

package/src/useAui.ts

@@ -0,0 +1,18 @@
+import type { AssistantClient } from "@assistant-ui/store/client";
+import { useAuiContext } from "./context";
+
+/**
+ * Returns the `AssistantClient` provided by the nearest {@link AuiProvider}.
+ *
+ * The returned object is stable for the lifetime of the provider and always
+ * forwards to the provider's current client, so it can be captured once and
+ * used in event handlers: `aui.composer.send()`, `aui.thread.cancelRun()`.
+ * Pair with {@link useAuiState} to read reactive state and
+ * {@link useAuiEvent} to subscribe to events.
+ *
+ * Called outside a provider, the returned client's scope accessors throw a
+ * descriptive error whenever they are used.
+ */
+export const useAui = (): AssistantClient => {
+  return useAuiContext().aui;
+};

package/src/useAuiEvent.ts

@@ -0,0 +1,64 @@
+import { onScopeDispose } from "vue";
+import { isDevelopment } from "@assistant-ui/core/store/internal";
+import {
+  normalizeEventSelector,
+  type AssistantClient,
+  type AssistantEventCallback,
+  type AssistantEventName,
+  type AssistantEventSelector,
+  type Unsubscribe,
+} from "@assistant-ui/store/client";
+import { useAuiContext } from "./context";
+
+/**
+ * Subscribes to an assistant event for the lifetime of the current effect
+ * scope.
+ *
+ * The subscription follows the provider's current client across structural
+ * changes. Use `scope: "*"` to receive emissions from any descendant scope.
+ *
+ * @example
+ * ```ts
+ * useAuiEvent("thread.modelContextUpdate", ({ threadId }) => {
+ *   analytics.track("model_context_update", { threadId });
+ * });
+ * ```
+ */
+export const useAuiEvent = <TEvent extends AssistantEventName>(
+  selector: AssistantEventSelector<TEvent>,
+  callback: AssistantEventCallback<TEvent>,
+): void => {
+  const { source } = useAuiContext();
+  const { scope, event } = normalizeEventSelector(selector);
+
+  let bound: AssistantClient | undefined;
+  let off: Unsubscribe | undefined;
+
+  const bind = () => {
+    const client = source.getClient();
+    if (client === bound) return;
+    let next: Unsubscribe;
+    try {
+      next = client.on(
+        { scope, event } as AssistantEventSelector<TEvent>,
+        callback,
+      );
+    } catch (error) {
+      // A live config may drop the selected scope; keep the current binding and
+      // retry once a later structural change makes the scope available again. A
+      // selector that never resolves (a typo'd scope) surfaces here in dev.
+      if (isDevelopment) console.warn(error);
+      return;
+    }
+    off?.();
+    bound = client;
+    off = next;
+  };
+
+  bind();
+  const unsubscribe = source.subscribe(bind);
+  onScopeDispose(() => {
+    unsubscribe();
+    off?.();
+  });
+};

package/src/useAuiState.ts

@@ -0,0 +1,55 @@
+import { computed, onScopeDispose, shallowRef, type ComputedRef } from "vue";
+import {
+  getProxiedAssistantState,
+  type AssistantState,
+} from "@assistant-ui/store/client";
+import { useAuiContext } from "./context";
+
+/**
+ * Subscribes to a slice of `AssistantState` and returns it as a computed ref.
+ *
+ * The `selector` runs on every store update; dependents re-run only when the
+ * selected slice changes by `Object.is`. Returning the entire state object is
+ * not supported and throws — select a specific field instead, or compose
+ * multiple `useAuiState` calls. Returning a fresh object or array literal
+ * re-triggers dependents on every update; select primitives or a memoized
+ * reference.
+ *
+ * Scopes that may be unavailable can be read via `s.optional.<scope>`, which
+ * resolves to `undefined` instead of throwing.
+ *
+ * @example
+ * ```ts
+ * const isRunning = useAuiState((s) => s.thread.isRunning);
+ * // template: <button :disabled="isRunning">…</button>
+ * ```
+ */
+export const useAuiState = <T>(
+  selector: (state: AssistantState) => T,
+): ComputedRef<T> => {
+  const { source } = useAuiContext();
+
+  const version = shallowRef(0);
+  const unsubscribe = source.subscribe(() => {
+    version.value++;
+  });
+  onScopeDispose(unsubscribe);
+
+  return computed(() => {
+    void version.value;
+    const state = getProxiedAssistantState(source.getClient());
+    const slice = selector(state);
+
+    if (
+      typeof slice === "object" &&
+      slice !== null &&
+      ((slice as unknown) === state || (slice as unknown) === state.optional)
+    ) {
+      throw new Error(
+        "You tried to return the entire AssistantState. This is not supported due to technical limitations.",
+      );
+    }
+
+    return slice;
+  });
+};

package/src/useScrollLock.test.ts

@@ -0,0 +1,207 @@
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { effectScope, ref } from "vue";
+import { useScrollLock } from "./useScrollLock";
+
+const scopes: ReturnType<typeof effectScope>[] = [];
+
+afterEach(() => {
+  scopes.forEach((scope) => scope.stop());
+  scopes.length = 0;
+  vi.useRealTimers();
+  vi.unstubAllGlobals();
+  document.documentElement.removeAttribute("style");
+  document.body.removeAttribute("style");
+  document.body.replaceChildren();
+});
+
+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 createLock(animated: HTMLElement) {
+  const scope = effectScope();
+  scopes.push(scope);
+  const target = ref<HTMLElement | null>(animated);
+  const lock = scope.run(() => useScrollLock(target, 200))!;
+  return { lock, target, scope };
+}
+
+function lockWithin(container: HTMLElement) {
+  const animated = document.createElement("div");
+  container.appendChild(animated);
+  return createLock(animated).lock;
+}
+
+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");
+  });
+
+  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");
+  });
+
+  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");
+  });
+
+  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";
+    scroller.style.paddingRight = "4px";
+    document.body.appendChild(scroller);
+    stubWidths(scroller, { offsetWidth: 306, clientWidth: 300 });
+
+    lockWithin(scroller)();
+    expect(scroller.style.paddingRight).toBe("10px");
+
+    vi.advanceTimersByTime(200);
+
+    expect(scroller.style.paddingRight).toBe("4px");
+    expect(scroller.style.scrollbarWidth).toBe("");
+  });
+
+  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 { lock, scope } = createLock(animated);
+
+    lock();
+    expect(first.style.scrollbarWidth).toBe("none");
+
+    second.appendChild(animated);
+    lock();
+
+    expect(first.style.scrollbarWidth).toBe("");
+    expect(second.style.scrollbarWidth).toBe("none");
+
+    scope.stop();
+    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 { lock, scope } = createLock(animated);
+
+    lock();
+    plainContainer.appendChild(animated);
+    lock();
+    scroller.style.scrollbarWidth = "thin";
+
+    scope.stop();
+
+    expect(scroller.style.scrollbarWidth).toBe("thin");
+  });
+
+  it("holds scroll position during the animation and releases it afterward", () => {
+    vi.useFakeTimers();
+    const scroller = document.createElement("div");
+    scroller.style.overflowY = "auto";
+    document.body.appendChild(scroller);
+    scroller.scrollTop = 120;
+
+    lockWithin(scroller)();
+    scroller.scrollTop = 90;
+    scroller.dispatchEvent(new Event("scroll"));
+    expect(scroller.scrollTop).toBe(120);
+
+    vi.advanceTimersByTime(200);
+    scroller.scrollTop = 90;
+    scroller.dispatchEvent(new Event("scroll"));
+    expect(scroller.scrollTop).toBe(90);
+  });
+
+  it("compensates the left gutter in RTL", () => {
+    const scroller = document.createElement("div");
+    scroller.style.overflowY = "auto";
+    scroller.style.direction = "rtl";
+    scroller.style.borderWidth = "0px";
+    scroller.style.paddingLeft = "3px";
+    document.body.appendChild(scroller);
+    stubWidths(scroller, { offsetWidth: 306, clientWidth: 300 });
+
+    lockWithin(scroller)();
+
+    expect(scroller.style.paddingLeft).toBe("9px");
+    expect(scroller.style.paddingRight).toBe("");
+  });
+});