@assistant-ui/vue 0.0.0 → 0.0.2

package/src/primitives/ThreadListItemPrimitiveRoot.ts

@@ -0,0 +1,57 @@
+import {
+  defineComponent,
+  h,
+  mergeProps,
+  type SlotsType,
+  type VNodeChild,
+} from "vue";
+import { useAuiState } from "../useAuiState";
+import {
+  provideThreadListItemFocus,
+  useThreadListCollection,
+} from "./threadListFocusGroup";
+
+export const ThreadListItemPrimitiveRoot = defineComponent({
+  name: "ThreadListItemPrimitiveRoot",
+  inheritAttrs: false,
+  slots: Object as SlotsType<{ default?: () => VNodeChild[] }>,
+  setup(_, { attrs, slots }) {
+    const active = useAuiState(
+      (s) => s.threads.mainThreadId === s.threadListItem.id,
+    );
+    const focus = provideThreadListItemFocus();
+    const collection = useThreadListCollection();
+    const onKeydown = (event: KeyboardEvent) => {
+      if (event.defaultPrevented) return;
+      const trigger = focus.trigger.value;
+      if (
+        !trigger ||
+        event.target !== trigger ||
+        (event.key !== "ArrowDown" && event.key !== "ArrowUp")
+      ) {
+        return;
+      }
+      const triggers = collection?.getTriggers();
+      if (!triggers) return;
+      const next =
+        triggers[
+          triggers.indexOf(trigger) + (event.key === "ArrowDown" ? 1 : -1)
+        ];
+      if (!next) return;
+      next.focus();
+      event.preventDefault();
+    };
+    return () =>
+      h(
+        "div",
+        mergeProps(attrs, {
+          ...(active.value && {
+            "data-active": "true",
+            "aria-current": "true",
+          }),
+          onKeydown,
+        }),
+        slots.default?.(),
+      );
+  },
+});

package/src/primitives/ThreadListItemPrimitiveTrigger.ts

@@ -0,0 +1,74 @@
+import {
+  defineComponent,
+  h,
+  mergeProps,
+  onScopeDispose,
+  type ComponentPublicInstance,
+  type SlotsType,
+  type VNodeChild,
+} from "vue";
+import { isAttrDisabled } from "./attrDisabled";
+import { useAui } from "../useAui";
+import { useAuiState } from "../useAuiState";
+import {
+  useThreadListCollection,
+  useThreadListItemFocus,
+} from "./threadListFocusGroup";
+
+/**
+ * A button that switches to the current thread-list item's thread. Carries
+ * `data-active` and `aria-current` while that thread is the main one, for
+ * standalone use; when nested under `ThreadListItemPrimitiveRoot` the root
+ * stamps them too, diverging from React's root-only pattern to keep existing
+ * standalone consumers styled.
+ */
+export const ThreadListItemPrimitiveTrigger = defineComponent({
+  name: "ThreadListItemPrimitiveTrigger",
+  inheritAttrs: false,
+  slots: Object as SlotsType<{ default?: () => VNodeChild[] }>,
+  setup(_, { attrs, slots }) {
+    const aui = useAui();
+    const active = useAuiState(
+      (s) => s.threads.mainThreadId === s.threadListItem.id,
+    );
+    const collection = useThreadListCollection();
+    const focus = useThreadListItemFocus();
+    const key = Symbol();
+    let trigger: HTMLButtonElement | null = null;
+    let unregister: (() => void) | undefined;
+    const setTrigger = (element: Element | ComponentPublicInstance | null) => {
+      const next = element instanceof HTMLButtonElement ? element : null;
+      const previous = trigger;
+      if (previous === next) return;
+      unregister?.();
+      if (focus && (next || focus.trigger.value === previous)) {
+        focus.trigger.value = next;
+      }
+      trigger = next;
+      unregister = next ? collection?.registerTrigger(key, next) : undefined;
+    };
+    onScopeDispose(() => {
+      unregister?.();
+      if (focus?.trigger.value === trigger) focus.trigger.value = null;
+    });
+    const onClick = (event: MouseEvent) => {
+      if (event.defaultPrevented || isAttrDisabled(attrs)) return;
+      aui.threadListItem.switchTo();
+    };
+    return () =>
+      h(
+        "button",
+        mergeProps(attrs, {
+          ref: setTrigger,
+          type: "button",
+          disabled: isAttrDisabled(attrs),
+          ...(active.value && {
+            "data-active": "true",
+            "aria-current": "true",
+          }),
+          onClick,
+        }),
+        slots.default?.(),
+      );
+  },
+});

package/src/primitives/ThreadListKeyboardNav.test.ts

@@ -0,0 +1,298 @@
+import { 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 type { ExternalStoreAdapter } from "@assistant-ui/core";
+import {
+  AssistantRuntimeImpl,
+  ExternalStoreRuntimeCore,
+} from "@assistant-ui/core/internal";
+import { AuiProvider } from "../AuiProvider";
+import { ThreadListItemByIndexProvider } from "./threadList";
+import { ThreadListItemPrimitiveRoot } from "./ThreadListItemPrimitiveRoot";
+import { ThreadListItemPrimitiveTrigger } from "./ThreadListItemPrimitiveTrigger";
+import { ThreadListPrimitiveRoot } from "./ThreadListPrimitiveRoot";
+
+type Message = { id: string; role: "user"; text: string };
+
+const createRuntime = () => {
+  let mainThreadId = "first";
+  let core!: ExternalStoreRuntimeCore;
+  const onSwitchToThread = vi.fn((threadId: string) => {
+    mainThreadId = threadId;
+    core.setAdapter(createAdapter());
+  });
+  const createAdapter = (): ExternalStoreAdapter<Message> => ({
+    messages: [],
+    convertMessage: (message) => ({
+      id: message.id,
+      role: message.role,
+      content: [{ type: "text", text: message.text }],
+    }),
+    onNew: async () => {},
+    adapters: {
+      threadList: {
+        threadId: mainThreadId,
+        threads: ["first", "second", "third"].map((id) => ({
+          status: "regular" as const,
+          id,
+          title: id,
+        })),
+        onSwitchToThread,
+      },
+    },
+  });
+  core = new ExternalStoreRuntimeCore(createAdapter());
+  return {
+    runtime: new AssistantRuntimeImpl(core),
+    onSwitchToThread,
+  };
+};
+
+const mount = (runtime: AssistantRuntimeImpl, view: Component) => {
+  const app = createApp(
+    defineComponent({
+      setup: () => () =>
+        h(
+          AuiProvider,
+          { config: AuiConfig({ threads: RuntimeAdapter(runtime) }) },
+          { default: () => h(view) },
+        ),
+    }),
+  );
+  const el = document.createElement("div");
+  document.body.append(el);
+  app.mount(el);
+  return {
+    el,
+    unmount: () => {
+      app.unmount();
+      el.remove();
+    },
+  };
+};
+
+const keydown = (element: HTMLElement, key: string) =>
+  element.dispatchEvent(
+    new KeyboardEvent("keydown", { bubbles: true, cancelable: true, key }),
+  );
+
+const buttons = (el: HTMLElement) => [
+  ...el.querySelectorAll<HTMLButtonElement>("button"),
+];
+
+describe("thread list keyboard navigation", () => {
+  it("moves through triggers in DOM order without wrapping", async () => {
+    const { runtime } = createRuntime();
+    const View = defineComponent({
+      setup: () => () =>
+        h(
+          ThreadListPrimitiveRoot,
+          { class: "list" },
+          {
+            default: () =>
+              [0, 1, 2].map((index) =>
+                h(
+                  ThreadListItemByIndexProvider,
+                  { index, key: index },
+                  {
+                    default: () =>
+                      h(
+                        ThreadListItemPrimitiveRoot,
+                        { class: "item" },
+                        {
+                          default: () =>
+                            h(ThreadListItemPrimitiveTrigger, null, {
+                              default: () => `item ${index}`,
+                            }),
+                        },
+                      ),
+                  },
+                ),
+              ),
+          },
+        ),
+    });
+    const { el, unmount } = mount(runtime, View);
+
+    await nextTick();
+    const [first, second, third] = buttons(el);
+    const list = el.querySelector<HTMLElement>(".list")!;
+    const [firstItem, , thirdItem] = el.querySelectorAll<HTMLElement>(".item");
+    list.insertBefore(thirdItem!, firstItem!);
+
+    third!.focus();
+    expect(keydown(third!, "ArrowDown")).toBe(false);
+    expect(document.activeElement).toBe(first);
+    expect(keydown(first!, "ArrowDown")).toBe(false);
+    expect(document.activeElement).toBe(second);
+    expect(keydown(second!, "ArrowDown")).toBe(true);
+    expect(document.activeElement).toBe(second);
+    expect(keydown(first!, "ArrowUp")).toBe(false);
+    expect(document.activeElement).toBe(third);
+    expect(keydown(third!, "ArrowUp")).toBe(true);
+    expect(document.activeElement).toBe(third);
+
+    unmount();
+  });
+
+  it("lets a caller veto collection navigation", async () => {
+    const { runtime } = createRuntime();
+    const View = defineComponent({
+      setup: () => () =>
+        h(ThreadListPrimitiveRoot, null, {
+          default: () =>
+            [0, 1].map((index) =>
+              h(
+                ThreadListItemByIndexProvider,
+                { index, key: index },
+                {
+                  default: () =>
+                    h(
+                      ThreadListItemPrimitiveRoot,
+                      {
+                        onKeydown: (event: KeyboardEvent) =>
+                          event.preventDefault(),
+                      },
+                      {
+                        default: () =>
+                          h(ThreadListItemPrimitiveTrigger, null, {
+                            default: () => `item ${index}`,
+                          }),
+                      },
+                    ),
+                },
+              ),
+            ),
+        }),
+    });
+    const { el, unmount } = mount(runtime, View);
+
+    await nextTick();
+    const [first] = buttons(el);
+    first!.focus();
+    expect(keydown(first!, "ArrowDown")).toBe(false);
+    expect(document.activeElement).toBe(first);
+
+    unmount();
+  });
+
+  it("tracks the main thread on the item root", async () => {
+    const { runtime, onSwitchToThread } = createRuntime();
+    const View = defineComponent({
+      setup: () => () =>
+        h(ThreadListPrimitiveRoot, null, {
+          default: () =>
+            [0, 1].map((index) =>
+              h(
+                ThreadListItemByIndexProvider,
+                { index, key: index },
+                {
+                  default: () =>
+                    h(
+                      ThreadListItemPrimitiveRoot,
+                      { class: "item" },
+                      {
+                        default: () =>
+                          h(ThreadListItemPrimitiveTrigger, null, {
+                            default: () => `item ${index}`,
+                          }),
+                      },
+                    ),
+                },
+              ),
+            ),
+        }),
+    });
+    const { el, unmount } = mount(runtime, View);
+
+    await nextTick();
+    const items = el.querySelectorAll<HTMLElement>(".item");
+    expect(items[0]!.getAttribute("data-active")).toBe("true");
+    expect(items[0]!.getAttribute("aria-current")).toBe("true");
+    buttons(el)[1]!.click();
+    await vi.waitFor(() => {
+      expect(onSwitchToThread).toHaveBeenCalledWith("second");
+      expect(items[1]!.getAttribute("data-active")).toBe("true");
+      expect(items[1]!.getAttribute("aria-current")).toBe("true");
+    });
+    expect(items[0]!.hasAttribute("data-active")).toBe(false);
+    expect(items[0]!.hasAttribute("aria-current")).toBe(false);
+
+    unmount();
+  });
+
+  it("keeps the trigger working without either root", async () => {
+    const { runtime, onSwitchToThread } = createRuntime();
+    const View = defineComponent({
+      setup: () => () =>
+        [0, 1].map((index) =>
+          h(
+            ThreadListItemByIndexProvider,
+            { index, key: index },
+            {
+              default: () =>
+                h(ThreadListItemPrimitiveTrigger, null, {
+                  default: () => `item ${index}`,
+                }),
+            },
+          ),
+        ),
+    });
+    const { el, unmount } = mount(runtime, View);
+
+    await nextTick();
+    buttons(el)[1]!.click();
+    await vi.waitFor(() => {
+      expect(onSwitchToThread).toHaveBeenCalledWith("second");
+    });
+
+    unmount();
+  });
+
+  it("unregisters a trigger when its item unmounts", async () => {
+    const { runtime } = createRuntime();
+    const showSecond = ref(true);
+    const View = defineComponent({
+      setup: () => () =>
+        h(ThreadListPrimitiveRoot, null, {
+          default: () =>
+            [0, 1, 2]
+              .filter((index) => index !== 1 || showSecond.value)
+              .map((index) =>
+                h(
+                  ThreadListItemByIndexProvider,
+                  { index, key: index },
+                  {
+                    default: () =>
+                      h(ThreadListItemPrimitiveRoot, null, {
+                        default: () =>
+                          h(ThreadListItemPrimitiveTrigger, null, {
+                            default: () => `item ${index}`,
+                          }),
+                      }),
+                  },
+                ),
+              ),
+        }),
+    });
+    const { el, unmount } = mount(runtime, View);
+
+    await nextTick();
+    showSecond.value = false;
+    await nextTick();
+    const [first, third] = buttons(el);
+    first!.focus();
+    expect(keydown(first!, "ArrowDown")).toBe(false);
+    expect(document.activeElement).toBe(third);
+
+    unmount();
+  });
+});

package/src/primitives/ThreadListPrimitiveRoot.ts

@@ -0,0 +1,18 @@
+import {
+  defineComponent,
+  h,
+  mergeProps,
+  type SlotsType,
+  type VNodeChild,
+} from "vue";
+import { provideThreadListCollection } from "./threadListFocusGroup";
+
+export const ThreadListPrimitiveRoot = defineComponent({
+  name: "ThreadListPrimitiveRoot",
+  inheritAttrs: false,
+  slots: Object as SlotsType<{ default?: () => VNodeChild[] }>,
+  setup(_, { attrs, slots }) {
+    provideThreadListCollection();
+    return () => h("div", mergeProps(attrs), slots.default?.());
+  },
+});

package/src/primitives/ThreadPrimitiveMessages.ts

@@ -0,0 +1,38 @@
+import { defineComponent, h, type SlotsType, type VNodeChild } from "vue";
+import type {} from "@assistant-ui/core/store";
+import { useAuiState } from "../useAuiState";
+import { MessageByIdProvider } from "./MessageByIdProvider";
+import { useStableKeys } from "./stableKeys";
+
+/**
+ * Renders the default slot once per message in the current thread, each
+ * instance scoped to its message through {@link MessageByIdProvider} and
+ * keyed by the message id. A stable id keeps its row component instance across
+ * updates; a new id remounts the row. Because rows render inside this
+ * component, an outer `<TransitionGroup>` cannot animate individual messages.
+ *
+ * @example
+ * ```html
+ * <ThreadPrimitiveMessages>
+ *   <ChatMessage />
+ * </ThreadPrimitiveMessages>
+ * ```
+ */
+export const ThreadPrimitiveMessages = defineComponent({
+  name: "ThreadPrimitiveMessages",
+  slots: Object as SlotsType<{ default?: () => VNodeChild[] }>,
+  setup(_, { slots }) {
+    const messages = useAuiState((s) => s.thread.messages);
+    const ids = useStableKeys(() =>
+      messages.value.map((message) => message.id),
+    );
+    return () =>
+      ids.value.map((id) =>
+        h(
+          MessageByIdProvider,
+          { id, key: id },
+          { default: () => slots.default?.() },
+        ),
+      );
+  },
+});

package/src/primitives/ThreadPrimitiveScrollToBottom.ts

@@ -0,0 +1,65 @@
+import {
+  defineComponent,
+  h,
+  inject,
+  mergeProps,
+  type PropType,
+  type SlotsType,
+  type VNodeChild,
+} from "vue";
+import { isDevelopment } from "@assistant-ui/core/store/internal";
+import { isAttrDisabled } from "./attrDisabled";
+import { viewportInjectionKey } from "./viewportContext";
+
+let warnedOutsideViewport = false;
+
+export const clearScrollToBottomWarningForTesting = () => {
+  warnedOutsideViewport = false;
+};
+
+/**
+ * A button that scrolls the surrounding {@link ThreadPrimitiveViewport} to
+ * the bottom. Disabled while the viewport is already at the bottom, or when
+ * no viewport provides the channel.
+ */
+export const ThreadPrimitiveScrollToBottom = defineComponent({
+  name: "ThreadPrimitiveScrollToBottom",
+  inheritAttrs: false,
+  props: {
+    behavior: {
+      type: String as PropType<ScrollBehavior>,
+      default: "auto",
+    },
+  },
+  slots: Object as SlotsType<{ default?: () => VNodeChild[] }>,
+  setup(props, { attrs, slots }) {
+    const viewport = inject(viewportInjectionKey, null);
+    if (isDevelopment && !viewport && !warnedOutsideViewport) {
+      warnedOutsideViewport = true;
+      console.warn(
+        "ThreadPrimitiveScrollToBottom: no surrounding ThreadPrimitiveViewport provides the scroll channel; the button stays disabled. Place it inside the viewport.",
+      );
+    }
+    const onClick = (event: MouseEvent) => {
+      if (
+        event.defaultPrevented ||
+        !viewport ||
+        viewport.isAtBottom.value ||
+        isAttrDisabled(attrs)
+      )
+        return;
+      viewport.scrollToBottom(props.behavior);
+    };
+    return () =>
+      h(
+        "button",
+        mergeProps(attrs, {
+          type: "button",
+          disabled:
+            !viewport || viewport.isAtBottom.value || isAttrDisabled(attrs),
+          onClick,
+        }),
+        slots.default?.(),
+      );
+  },
+});

package/src/primitives/ThreadPrimitiveViewport.ts

@@ -0,0 +1,120 @@
+import {
+  defineComponent,
+  h,
+  onMounted,
+  onScopeDispose,
+  provide,
+  shallowRef,
+  watch,
+  type SlotsType,
+  type VNodeChild,
+} from "vue";
+import type {} from "@assistant-ui/core/store";
+import { useAuiEvent } from "../useAuiEvent";
+import { useAuiState } from "../useAuiState";
+import { createThreadViewportAutoScroll } from "@assistant-ui/store/client";
+import { viewportInjectionKey } from "./viewportContext";
+
+/**
+ * A scrollable container that keeps the thread pinned to the bottom: content
+ * growth scrolls back down while the user sits at the bottom, a run start
+ * scrolls down, and scrolling up unpins until the user returns to the bottom.
+ * The four options mirror the React hook and are independent: `autoScroll`
+ * covers follow-on-content-growth, and the other three gate the
+ * first-messages, run-start, and thread-switch scrolls. Provides the
+ * scroll-to-bottom channel that {@link ThreadPrimitiveScrollToBottom} drives;
+ * the React viewport's top-anchor system stays in the React viewport store
+ * and is not ported.
+ */
+export const ThreadPrimitiveViewport = defineComponent({
+  name: "ThreadPrimitiveViewport",
+  props: {
+    autoScroll: {
+      type: Boolean,
+      default: true,
+    },
+    scrollToBottomOnInitialize: {
+      type: Boolean,
+      default: true,
+    },
+    scrollToBottomOnRunStart: {
+      type: Boolean,
+      default: true,
+    },
+    scrollToBottomOnThreadSwitch: {
+      type: Boolean,
+      default: true,
+    },
+  },
+  slots: Object as SlotsType<{ default?: () => VNodeChild[] }>,
+  setup(props, { slots }) {
+    const divRef = shallowRef<HTMLElement | null>(null);
+    const contentInsetEntries = new Map<symbol, number>();
+    const isAtBottom = shallowRef(true);
+    const autoScroll = createThreadViewportAutoScroll({
+      getOptions: () => ({
+        autoScroll: props.autoScroll,
+        scrollToBottomOnInitialize: props.scrollToBottomOnInitialize,
+        scrollToBottomOnRunStart: props.scrollToBottomOnRunStart,
+        scrollToBottomOnThreadSwitch: props.scrollToBottomOnThreadSwitch,
+      }),
+      onAtBottomChange: (value) => {
+        isAtBottom.value = value;
+      },
+    });
+
+    const updateContentInset = () => {
+      let total = 0;
+      for (const height of contentInsetEntries.values()) total += height;
+      autoScroll.setContentInset(total);
+    };
+
+    const registerContentInset = () => {
+      const id = Symbol();
+      contentInsetEntries.set(id, 0);
+
+      return {
+        setHeight: (height: number) => {
+          if (contentInsetEntries.get(id) === height) return;
+          contentInsetEntries.set(id, height);
+          updateContentInset();
+        },
+        unregister: () => {
+          if (!contentInsetEntries.delete(id)) return;
+          updateContentInset();
+        },
+      };
+    };
+
+    let detach: (() => void) | undefined;
+    onMounted(() => {
+      const div = divRef.value;
+      if (!div) return;
+      detach = autoScroll.attach(div);
+    });
+    onScopeDispose(() => {
+      detach?.();
+      autoScroll.dispose();
+    });
+
+    const hasMessages = useAuiState((s) => s.thread.messages.length > 0);
+    watch(
+      [hasMessages, () => props.scrollToBottomOnInitialize],
+      ([has]) => autoScroll.setHasMessages(has),
+      { immediate: true },
+    );
+
+    useAuiEvent("thread.runStart", () => autoScroll.runStarted());
+
+    useAuiEvent("threads.selectionChanged", () => autoScroll.threadSwitched());
+
+    provide(viewportInjectionKey, {
+      isAtBottom,
+      scrollToBottom: (behavior: ScrollBehavior = "auto") =>
+        autoScroll.scrollToBottom(behavior),
+      registerContentInset,
+    });
+
+    return () => h("div", { ref: divRef }, slots.default?.());
+  },
+});