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

package/src/primitives/thread/useThreadViewportAutoScroll.ts

@@ -0,0 +1,140 @@
+"use client";
+
+import { shallowRef, toValue, type MaybeRefOrGetter } from "vue";
+import { useAui, useAuiEvent, useAuiState } from "@ulearning/ai-store";
+import { useOnScrollToBottom } from "../../utils/hooks/useOnScrollToBottom";
+import { useManagedRef } from "../../utils/hooks/useManagedRef";
+import { useThreadViewportStore } from "../../context/vue/ThreadViewportContext";
+import { getThreadViewportAutoScroll } from "../../context/stores/ThreadViewport";
+import { useIsomorphicLayoutEffect } from "@ulearning/ai-store/internal";
+
+export namespace useThreadViewportAutoScroll {
+  export type Options = {
+    /**
+     * Whether to automatically scroll to the bottom when new messages are added.
+     * When enabled, the viewport will automatically scroll to show the latest content.
+     *
+     * Default false if `turnAnchor` is "top", otherwise defaults to true.
+     */
+    autoScroll?: boolean | undefined;
+
+    /**
+     * Whether to scroll to bottom when a new run starts.
+     *
+     * Defaults to true.
+     */
+    scrollToBottomOnRunStart?: boolean | undefined;
+
+    /**
+     * Whether to scroll to bottom when messages first appear in the thread.
+     *
+     * Defaults to true.
+     */
+    scrollToBottomOnInitialize?: boolean | undefined;
+
+    /**
+     * Whether to scroll to bottom when switching to a different thread.
+     *
+     * Defaults to true.
+     */
+    scrollToBottomOnThreadSwitch?: boolean | undefined;
+  };
+}
+
+export const useThreadViewportAutoScroll = <TElement extends HTMLElement>(
+  options: MaybeRefOrGetter<useThreadViewportAutoScroll.Options>,
+): ((element: TElement | null) => void) => {
+  const aui = useAui();
+  const element = shallowRef<TElement | null>(null);
+  const hasMessages = useAuiState((s) => s.thread.messages.length > 0);
+  const firstMessageId = useAuiState((s) => s.thread.messages[0]?.id);
+  const threadId = useAuiState((s) => s.optional.threadListItem?.id);
+  const isRunning = useAuiState((s) => s.thread.isRunning);
+  const threadViewportStore = useThreadViewportStore();
+  const binding = getThreadViewportAutoScroll(threadViewportStore);
+  const { controller } = binding;
+
+  useIsomorphicLayoutEffect(() => {
+    const previous = binding.getOptions;
+    const getOptions = () => {
+      const state = threadViewportStore.getState();
+      const current = toValue(options);
+      return {
+        autoScroll: current.autoScroll ?? state.turnAnchor !== "top",
+        holdFollow:
+          isRunning.value &&
+          state.turnAnchor === "top" &&
+          state.element.viewport === element.value &&
+          state.element.anchor !== null,
+        scrollToBottomOnInitialize: current.scrollToBottomOnInitialize ?? true,
+        scrollToBottomOnRunStart:
+          (current.scrollToBottomOnRunStart ?? true) &&
+          state.turnAnchor !== "top",
+        scrollToBottomOnThreadSwitch:
+          current.scrollToBottomOnThreadSwitch ?? true,
+      };
+    };
+    binding.getOptions = getOptions;
+    return () => {
+      if (binding.getOptions === getOptions) binding.getOptions = previous;
+    };
+  }, []);
+
+  let previous = {
+    threadId: threadId.value,
+    firstMessageId: firstMessageId.value,
+  };
+  useIsomorphicLayoutEffect(
+    () => {
+      const current = {
+        threadId: threadId.value,
+        firstMessageId: firstMessageId.value,
+      };
+      const before = previous;
+      previous = current;
+      if (before.threadId !== current.threadId) return;
+      const previousFirstMessageId = before.firstMessageId;
+      if (
+        previousFirstMessageId === undefined ||
+        previousFirstMessageId === current.firstMessageId
+      )
+        return;
+      const prepended = aui.thread
+        .getState()
+        .messages.some(
+          (message, index) =>
+            index > 0 && message.id === previousFirstMessageId,
+        );
+      if (prepended) controller.messagesPrepended(previousFirstMessageId);
+    },
+    () => [firstMessageId.value, threadId.value],
+  );
+
+  useIsomorphicLayoutEffect(
+    () => {
+      controller.setHasMessages(hasMessages.value);
+    },
+    () => [hasMessages.value, toValue(options).scrollToBottomOnInitialize],
+  );
+
+  useOnScrollToBottom(({ behavior }) => controller.scrollToBottom(behavior));
+  useAuiEvent("thread.runStart", () => controller.runStarted());
+  useIsomorphicLayoutEffect(() => {
+    if (!aui.optional.threads) return;
+    return aui.on("threads.selectionChanged", () =>
+      controller.threadSwitched(),
+    );
+  }, []);
+
+  return useManagedRef(
+    (node: TElement) => {
+      element.value = node;
+      const detach = controller.attach(node);
+      return () => {
+        detach();
+        if (element.value === node) element.value = null;
+      };
+    },
+    () => [],
+  );
+};

package/src/primitives/thread.ts

@@ -0,0 +1,17 @@
+export { ThreadPrimitiveRoot as Root } from "./thread/ThreadRoot";
+export { ThreadPrimitiveEmpty as Empty } from "./thread/ThreadEmpty";
+export { ThreadPrimitiveIf as If } from "./thread/ThreadIf";
+export { ThreadPrimitiveViewport as Viewport } from "./thread/ThreadViewport";
+export { ThreadPrimitiveViewportProvider as ViewportProvider } from "../context/providers/ThreadViewportProvider";
+export { ThreadPrimitiveViewportFooter as ViewportFooter } from "./thread/ThreadViewportFooter";
+export { ThreadPrimitiveMessages as Messages } from "./thread/ThreadMessages";
+export { ThreadPrimitiveMessageByIndex as MessageByIndex } from "./thread/ThreadMessages";
+export { ThreadPrimitiveUnstable_MessageById as Unstable_MessageById } from "./thread/ThreadMessages";
+export { ThreadPrimitiveRow as Row } from "./thread/ThreadMessages";
+export { ThreadPrimitiveScrollToBottom as ScrollToBottom } from "./thread/ThreadScrollToBottom";
+export { ThreadPrimitiveLoadEarlier as LoadEarlier } from "./thread/ThreadLoadEarlier";
+export { ThreadPrimitiveSuggestion as Suggestion } from "./thread/ThreadSuggestion";
+export {
+  ThreadPrimitiveSuggestions as Suggestions,
+  ThreadPrimitiveSuggestionByIndex as SuggestionByIndex,
+} from "./thread/ThreadSuggestions";

package/src/primitives/threadList/ThreadListItems.tsx

@@ -0,0 +1,6 @@
+"use client";
+
+export {
+  ThreadListPrimitiveItems,
+  ThreadListPrimitiveItemByIndex,
+} from "@ulearning/ai-core/vue";

package/src/primitives/threadList/ThreadListLoadMore.tsx

@@ -0,0 +1,25 @@
+"use client";
+
+import { computed } from "vue";
+
+import {
+  type ActionButtonElement,
+  type ActionButtonProps,
+  createActionButton,
+} from "../../utils/createActionButton";
+import { useThreadListLoadMore as useThreadListLoadMoreBehavior } from "@ulearning/ai-core/vue";
+
+const useThreadListLoadMore = () => {
+  const { loadMore, disabled } = useThreadListLoadMoreBehavior();
+  return computed(() => (disabled.value ? null : loadMore));
+};
+
+export namespace ThreadListPrimitiveLoadMore {
+  export type Element = ActionButtonElement;
+  export type Props = ActionButtonProps<typeof useThreadListLoadMore>;
+}
+
+export const ThreadListPrimitiveLoadMore = createActionButton(
+  "ThreadListPrimitive.LoadMore",
+  useThreadListLoadMore,
+);

package/src/primitives/threadList/ThreadListNew.tsx

@@ -0,0 +1,47 @@
+"use client";
+
+import {
+  createActionButton,
+  type ActionButtonElement,
+  type ActionButtonProps,
+} from "../../utils/createActionButton";
+import { defineComponent, h } from "vue";
+import { useForwardExpose } from "reka-ui";
+import { useAuiState } from "@ulearning/ai-store";
+import { useThreadListNew as useThreadListNewBehavior } from "@ulearning/ai-core/vue";
+
+export namespace ThreadListPrimitiveNew {
+  export type Element = ActionButtonElement;
+  export type Props = ActionButtonProps<() => void>;
+}
+
+const NewThreadButton = createActionButton(
+  "ThreadListPrimitive.New.Button",
+  () => {
+    const { switchToNewThread } = useThreadListNewBehavior();
+    return switchToNewThread;
+  },
+);
+
+export const ThreadListPrimitiveNew =
+  defineComponent<ThreadListPrimitiveNew.Props>(
+    (_props, { attrs, slots }) => {
+      const { forwardRef } = useForwardExpose();
+      const isMain = useAuiState(
+        (s) => s.threads.newThreadId === s.threads.mainThreadId,
+      );
+      return () =>
+        h(
+          NewThreadButton,
+          {
+            ...(isMain.value
+              ? { "data-active": "true", "aria-current": "true" as const }
+              : {}),
+            ...attrs,
+            ref: forwardRef,
+          },
+          slots,
+        );
+    },
+    { name: "ThreadListPrimitive.New", inheritAttrs: false },
+  );

package/src/primitives/threadList/ThreadListRoot.tsx

@@ -0,0 +1,29 @@
+"use client";
+
+import { defineComponent, h, type ComponentPublicInstance } from "vue";
+import { useForwardExpose } from "reka-ui";
+import { Primitive, type PrimitiveProps } from "../../utils/Primitive";
+import { ThreadListCollection } from "../threadListFocusGroup";
+
+export namespace ThreadListPrimitiveRoot {
+  export type Element = ComponentPublicInstance;
+  export type Props = PrimitiveProps<"div">;
+}
+export const ThreadListPrimitiveRoot = defineComponent(
+  (props: ThreadListPrimitiveRoot.Props, { attrs, slots }) => {
+    const { forwardRef } = useForwardExpose();
+    return () =>
+      h(ThreadListCollection.Provider, null, {
+        default: () =>
+          h(ThreadListCollection.Slot, null, {
+            default: () =>
+              h(Primitive.div, { ...attrs, ...props, ref: forwardRef }, slots),
+          }),
+      });
+  },
+  {
+    name: "ThreadListPrimitive.Root",
+    inheritAttrs: false,
+    props: ["render", "asChild", "children"],
+  },
+);

package/src/primitives/threadList.ts

@@ -0,0 +1,5 @@
+export { ThreadListPrimitiveNew as New } from "./threadList/ThreadListNew";
+export { ThreadListPrimitiveItems as Items } from "./threadList/ThreadListItems";
+export { ThreadListPrimitiveItemByIndex as ItemByIndex } from "./threadList/ThreadListItems";
+export { ThreadListPrimitiveLoadMore as LoadMore } from "./threadList/ThreadListLoadMore";
+export { ThreadListPrimitiveRoot as Root } from "./threadList/ThreadListRoot";

package/src/primitives/threadListFocusGroup.ts

@@ -0,0 +1,91 @@
+"use client";
+
+import {
+  defineComponent,
+  h,
+  inject,
+  provide,
+  shallowRef,
+  type ComponentPublicInstance,
+  type InjectionKey,
+  type ShallowRef,
+} from "vue";
+import { Slot } from "reka-ui";
+import { useIsomorphicLayoutEffect } from "@ulearning/ai-store/internal";
+
+type CollectionItem = { ref: ShallowRef<HTMLButtonElement | null> };
+const CollectionContext: InjectionKey<Set<CollectionItem>> = Symbol(
+  "ThreadListCollection",
+);
+const Provider = defineComponent({
+  name: "ThreadListCollectionProvider",
+  setup(_, { slots }) {
+    provide(CollectionContext, new Set());
+    return () => slots.default?.();
+  },
+});
+const CollectionSlot = defineComponent({
+  name: "ThreadListCollectionSlot",
+  setup(_, { slots }) {
+    return () => slots.default?.();
+  },
+});
+const ItemSlot = defineComponent({
+  name: "ThreadListCollectionItemSlot",
+  setup(_, { slots }) {
+    const collection = inject(CollectionContext, null);
+    if (!collection)
+      throw new Error("ThreadList trigger requires ThreadList.Root.");
+    const item: CollectionItem = { ref: shallowRef(null) };
+    const setElement = (instance: Element | ComponentPublicInstance | null) => {
+      const element = instance instanceof Element ? instance : instance?.$el;
+      item.ref.value = element instanceof HTMLButtonElement ? element : null;
+    };
+    useIsomorphicLayoutEffect(() => {
+      collection.add(item);
+      return () => {
+        collection.delete(item);
+      };
+    }, []);
+    return () =>
+      h(Slot, { ref: setElement, "data-radix-collection-item": "" }, slots);
+  },
+});
+export const ThreadListCollection = {
+  Provider,
+  Slot: CollectionSlot,
+  ItemSlot,
+};
+export const useThreadListCollection = (_scope?: unknown) => {
+  const collection = inject(CollectionContext, null);
+  if (!collection) throw new Error("ThreadList item requires ThreadList.Root.");
+  return () =>
+    [...collection]
+      .filter((item) => item.ref.value?.isConnected)
+      .sort((a, b) => {
+        const first = a.ref.value,
+          second = b.ref.value;
+        if (!first || !second || first === second) return 0;
+        return first.compareDocumentPosition(second) &
+          Node.DOCUMENT_POSITION_FOLLOWING
+          ? -1
+          : 1;
+      });
+};
+
+type ThreadListItemFocus = {
+  triggerRef: ShallowRef<HTMLButtonElement | null>;
+  moreRef: ShallowRef<HTMLButtonElement | null>;
+};
+const ThreadListItemFocusContext: InjectionKey<ThreadListItemFocus> = Symbol(
+  "ThreadListItemFocus",
+);
+export const ThreadListItemFocusProvider = defineComponent(
+  (props: { value: ThreadListItemFocus }, { slots }) => {
+    provide(ThreadListItemFocusContext, props.value);
+    return () => slots.default?.();
+  },
+  { name: "ThreadListItemFocusProvider", props: ["value"] },
+);
+export const useThreadListItemFocus = () =>
+  inject(ThreadListItemFocusContext, null);

package/src/primitives/threadListItem/ThreadListItemArchive.ts

@@ -0,0 +1,23 @@
+"use client";
+
+import {
+  type ActionButtonElement,
+  type ActionButtonProps,
+  createActionButton,
+} from "../../utils/createActionButton";
+import { useThreadListItemArchive as useThreadListItemArchiveBehavior } from "@ulearning/ai-core/vue";
+
+const useThreadListItemArchive = () => {
+  const { archive } = useThreadListItemArchiveBehavior();
+  return archive;
+};
+
+export namespace ThreadListItemPrimitiveArchive {
+  export type Element = ActionButtonElement;
+  export type Props = ActionButtonProps<typeof useThreadListItemArchive>;
+}
+
+export const ThreadListItemPrimitiveArchive = createActionButton(
+  "ThreadListItemPrimitive.Archive",
+  useThreadListItemArchive,
+);

package/src/primitives/threadListItem/ThreadListItemDelete.ts

@@ -0,0 +1,23 @@
+"use client";
+
+import {
+  type ActionButtonElement,
+  type ActionButtonProps,
+  createActionButton,
+} from "../../utils/createActionButton";
+import { useThreadListItemDelete as useThreadListItemDeleteBehavior } from "@ulearning/ai-core/vue";
+
+const useThreadListItemDelete = () => {
+  const { delete: deleteThread } = useThreadListItemDeleteBehavior();
+  return deleteThread;
+};
+
+export namespace ThreadListItemPrimitiveDelete {
+  export type Element = ActionButtonElement;
+  export type Props = ActionButtonProps<typeof useThreadListItemDelete>;
+}
+
+export const ThreadListItemPrimitiveDelete = createActionButton(
+  "ThreadListItemPrimitive.Delete",
+  useThreadListItemDelete,
+);

package/src/primitives/threadListItem/ThreadListItemRoot.tsx

@@ -0,0 +1,100 @@
+"use client";
+
+import {
+  defineComponent,
+  h,
+  mergeProps,
+  shallowRef,
+  type ComponentPublicInstance,
+} from "vue";
+import { useDirection, useForwardExpose } from "reka-ui";
+import { useAuiState } from "@ulearning/ai-store";
+import { Primitive, type PrimitiveProps } from "../../utils/Primitive";
+import {
+  ThreadListItemFocusProvider,
+  useThreadListCollection,
+} from "../threadListFocusGroup";
+
+export namespace ThreadListItemPrimitiveRoot {
+  export type Element = ComponentPublicInstance;
+  export type Props = PrimitiveProps<"div">;
+}
+export const ThreadListItemPrimitiveRoot = defineComponent(
+  (props: ThreadListItemPrimitiveRoot.Props, { attrs, slots }) => {
+    const { forwardRef } = useForwardExpose();
+    const isMain = useAuiState(
+      (s) => s.threads.mainThreadId === s.threadListItem.id,
+    );
+    const triggerRef = shallowRef<HTMLButtonElement | null>(null);
+    const moreRef = shallowRef<HTMLButtonElement | null>(null);
+    const focus = { triggerRef, moreRef };
+    const getItems = useThreadListCollection();
+    const direction = useDirection();
+    const onKeydown = (event: KeyboardEvent) => {
+      if (
+        event.defaultPrevented ||
+        event.altKey ||
+        event.ctrlKey ||
+        event.metaKey ||
+        event.shiftKey
+      )
+        return;
+      const forwardKey = direction.value === "rtl" ? "ArrowLeft" : "ArrowRight";
+      const backKey = direction.value === "rtl" ? "ArrowRight" : "ArrowLeft";
+      const trigger = triggerRef.value,
+        more = moreRef.value;
+      if (trigger && event.target === trigger) {
+        if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+          const triggers = getItems()
+            .map((item) => item.ref.value)
+            .filter(
+              (node): node is HTMLButtonElement =>
+                node !== null && !node.disabled,
+            );
+          const next =
+            triggers[
+              triggers.indexOf(trigger) + (event.key === "ArrowDown" ? 1 : -1)
+            ];
+          if (next) {
+            next.focus();
+            event.preventDefault();
+          }
+        } else if (event.key === forwardKey && more) {
+          more.focus();
+          event.preventDefault();
+        }
+      } else if (more && event.target === more && event.key === backKey) {
+        trigger?.focus();
+        event.preventDefault();
+      }
+    };
+    return () =>
+      h(
+        ThreadListItemFocusProvider,
+        { value: focus },
+        {
+          default: () =>
+            h(
+              Primitive.div,
+              mergeProps(
+                {
+                  ...(isMain.value
+                    ? { "data-active": "true", "aria-current": "true" }
+                    : {}),
+                  ...attrs,
+                  ...props,
+                  ref: forwardRef,
+                },
+                { onKeydown },
+              ),
+              slots,
+            ),
+        },
+      );
+  },
+  {
+    name: "ThreadListItemPrimitive.Root",
+    inheritAttrs: false,
+    props: ["render", "asChild", "children"],
+  },
+);

package/src/primitives/threadListItem/ThreadListItemTitle.test.tsx

@@ -0,0 +1,63 @@
+import { describe, expect, it } from "vitest";
+import { createSSRApp, defineComponent, type VNodeChild } from "vue";
+import { renderToString } from "vue/server-renderer";
+import {
+  AssistantRuntimeProvider,
+  ThreadListItemByIndexProvider,
+} from "@ulearning/ai-core/vue";
+import {
+  AssistantRuntimeImpl,
+  ExternalStoreRuntimeCore,
+} from "@ulearning/ai-core/internal";
+import { ThreadListItemPrimitiveTitle } from "./ThreadListItemTitle";
+
+const renderTitle = async (
+  title: string | undefined,
+  fallback: VNodeChild = "New Chat",
+) => {
+  const runtime = new AssistantRuntimeImpl(
+    new ExternalStoreRuntimeCore({
+      messages: [],
+      onNew: async () => {},
+      adapters: {
+        threadList: { threads: [{ id: "thread", status: "regular", title }] },
+      },
+    }),
+  );
+  const Root = defineComponent(() => () => (
+    <AssistantRuntimeProvider runtime={runtime}>
+      <ThreadListItemByIndexProvider index={0} archived={false}>
+        <ThreadListItemPrimitiveTitle fallback={fallback} />
+      </ThreadListItemByIndexProvider>
+    </AssistantRuntimeProvider>
+  ));
+  const html = await renderToString(createSSRApp(Root));
+  // Native providers emit invisible fragment boundaries around their slots.
+  return html.replace(/<!--\[-->|<!--\]-->|<!---->/g, "");
+};
+
+describe("ThreadListItemPrimitiveTitle", () => {
+  it("renders the thread title text", async () => {
+    const html = await renderTitle("Weather Inquiry for San Francisco");
+
+    expect(html).toBe("Weather Inquiry for San Francisco");
+  });
+
+  it("renders fallback text when title is missing", async () => {
+    const html = await renderTitle(undefined, "New Chat");
+
+    expect(html).toBe("New Chat");
+  });
+
+  it("renders fallback text when title is an empty string", async () => {
+    const html = await renderTitle("", "New Chat");
+
+    expect(html).toBe("New Chat");
+  });
+
+  it("renders native VNode fallback content", async () => {
+    const html = await renderTitle(undefined, <em>New Chat</em>);
+
+    expect(html).toBe("<em>New Chat</em>");
+  });
+});

package/src/primitives/threadListItem/ThreadListItemTitle.tsx

@@ -0,0 +1,3 @@
+"use client";
+
+export { ThreadListItemPrimitiveTitle } from "@ulearning/ai-core/vue";

package/src/primitives/threadListItem/ThreadListItemTrigger.tsx

@@ -0,0 +1,51 @@
+"use client";
+
+import { defineComponent, h, type ComponentPublicInstance } from "vue";
+import { useForwardExpose } from "reka-ui";
+import {
+  type ActionButtonElement,
+  type ActionButtonProps,
+  createActionButton,
+} from "../../utils/createActionButton";
+import { useThreadListItemTrigger as useThreadListItemTriggerBehavior } from "@ulearning/ai-core/vue";
+import {
+  ThreadListCollection,
+  useThreadListItemFocus,
+} from "../threadListFocusGroup";
+const useThreadListItemTrigger = () =>
+  useThreadListItemTriggerBehavior().switchTo;
+export namespace ThreadListItemPrimitiveTrigger {
+  export type Element = ActionButtonElement;
+  export type Props = ActionButtonProps<typeof useThreadListItemTrigger>;
+}
+const ThreadListItemTriggerButton = createActionButton(
+  "ThreadListItemPrimitive.TriggerButton",
+  useThreadListItemTrigger,
+);
+export const ThreadListItemPrimitiveTrigger = defineComponent(
+  (props: ThreadListItemPrimitiveTrigger.Props, { attrs, slots }) => {
+    const { forwardRef } = useForwardExpose();
+    const focus = useThreadListItemFocus();
+    const setElement = (instance: Element | ComponentPublicInstance | null) => {
+      forwardRef(instance);
+      if (!focus) return;
+      const element = instance instanceof Element ? instance : instance?.$el;
+      focus.triggerRef.value =
+        element instanceof HTMLButtonElement ? element : null;
+    };
+    return () =>
+      h(ThreadListCollection.ItemSlot, null, {
+        default: () =>
+          h(
+            ThreadListItemTriggerButton,
+            { ...attrs, ...props, ref: setElement },
+            slots,
+          ),
+      });
+  },
+  {
+    name: "ThreadListItemPrimitive.Trigger",
+    inheritAttrs: false,
+    props: ["render", "asChild", "children"],
+  },
+);