@assistant-ui/vue 0.0.0-stage → 0.0.1

package/src/index.ts

@@ -0,0 +1,87 @@
+export { AuiProvider } from "./AuiProvider";
+export { AuiIf } from "./AuiIf";
+export { useAui } from "./useAui";
+export { useAuiState } from "./useAuiState";
+export { useAuiEvent } from "./useAuiEvent";
+export { useScrollLock } from "./useScrollLock";
+
+export { MessageByIdProvider } from "./primitives/MessageByIdProvider";
+export { PartByIndexProvider } from "./primitives/PartByIndexProvider";
+export { ThreadPrimitiveMessages } from "./primitives/ThreadPrimitiveMessages";
+export { ThreadPrimitiveViewport } from "./primitives/ThreadPrimitiveViewport";
+export { ThreadPrimitiveViewportFooter } from "./primitives/ThreadPrimitiveViewportFooter";
+export { ThreadPrimitiveScrollToBottom } from "./primitives/ThreadPrimitiveScrollToBottom";
+export {
+  MessagePrimitiveParts,
+  type DataUIProps,
+  type ToolUIProps,
+} from "./primitives/MessagePrimitiveParts";
+export { ChainOfThoughtPrimitiveParts } from "./primitives/ChainOfThoughtPrimitiveParts";
+export { ChainOfThoughtPrimitiveAccordionTrigger } from "./primitives/ChainOfThoughtPrimitiveAccordionTrigger";
+export { ComposerPrimitiveInput } from "./primitives/ComposerPrimitiveInput";
+export { ComposerPrimitiveSend } from "./primitives/ComposerPrimitiveSend";
+export { ComposerPrimitiveCancel } from "./primitives/ComposerPrimitiveCancel";
+export {
+  BranchPickerPrimitivePrevious,
+  BranchPickerPrimitiveNext,
+  BranchPickerPrimitiveNumber,
+  BranchPickerPrimitiveCount,
+} from "./primitives/branchPicker";
+export {
+  ActionBarPrimitiveEdit,
+  ActionBarPrimitiveReload,
+  ActionBarPrimitiveCopy,
+} from "./primitives/actionBar";
+export {
+  SuggestionByIndexProvider,
+  ThreadPrimitiveSuggestions,
+  SuggestionPrimitiveTrigger,
+  SuggestionPrimitiveTitle,
+  SuggestionPrimitiveDescription,
+} from "./primitives/suggestions";
+export {
+  ThreadListItemByIndexProvider,
+  ThreadListPrimitiveItems,
+  ThreadListPrimitiveNew,
+  ThreadListItemPrimitiveTitle,
+  ThreadListItemPrimitiveTrigger,
+} from "./primitives/threadList";
+export { ThreadListPrimitiveRoot } from "./primitives/ThreadListPrimitiveRoot";
+export { ThreadListItemPrimitiveRoot } from "./primitives/ThreadListItemPrimitiveRoot";
+export { AttachmentByIndexProvider } from "./primitives/AttachmentByIndexProvider";
+export {
+  AttachmentPrimitiveRoot,
+  AttachmentPrimitiveName,
+  AttachmentPrimitiveThumb,
+  AttachmentPrimitiveRemove,
+} from "./primitives/attachment";
+export {
+  ComposerPrimitiveAttachments,
+  ComposerPrimitiveAddAttachment,
+  ComposerPrimitiveAttachmentDropzone,
+} from "./primitives/composerAttachments";
+export { MessagePrimitiveAttachments } from "./primitives/messageAttachments";
+export { ErrorPrimitiveRoot, ErrorPrimitiveMessage } from "./primitives/error";
+export { ThreadPrimitiveRoot } from "./primitives/thread";
+export { MessagePrimitiveRoot } from "./primitives/message";
+export {
+  ThreadListPrimitiveLoadMore,
+  ThreadListItemPrimitiveArchive,
+  ThreadListItemPrimitiveUnarchive,
+  ThreadListItemPrimitiveDelete,
+} from "./primitives/threadListStructural";
+
+export {
+  AuiConfig,
+  Derived,
+  createAssistantClient,
+  type AssistantClient,
+  type AssistantClientHandle,
+  type AssistantClientSource,
+  type AssistantConfigSource,
+  type AssistantState,
+  type AssistantEventCallback,
+  type AssistantEventName,
+  type AssistantEventSelector,
+  type Unsubscribe,
+} from "@assistant-ui/store/client";

package/src/primitives/AttachmentByIndexProvider.ts

@@ -0,0 +1,88 @@
+import {
+  computed,
+  defineComponent,
+  h,
+  onScopeDispose,
+  type PropType,
+  type SlotsType,
+  type VNodeChild,
+} from "vue";
+import { AuiConfig, Derived } from "@assistant-ui/store/client";
+import type { AssistantClient } from "@assistant-ui/store/client";
+import type { AttachmentMethods, MessageState } from "@assistant-ui/core/store";
+import { AuiProvider } from "../AuiProvider";
+import { useAui } from "../useAui";
+import { createLastValidCache, createStaleReporter } from "./lastValidCache";
+
+const attachmentSourceOf = (
+  aui: AssistantClient,
+  source: "composer" | "message",
+) => (source === "composer" ? aui.composer : aui.message);
+
+const attachmentCountOf = (
+  aui: AssistantClient,
+  source: "composer" | "message",
+) => {
+  const state = attachmentSourceOf(aui, source).getState();
+  const attachments =
+    source === "message"
+      ? ((state as MessageState).submission?.attachments ?? state.attachments)
+      : state.attachments;
+  return attachments?.length ?? 0;
+};
+
+/**
+ * Scopes the subtree to the attachment at `index` of `source` (the composer's
+ * pending attachments or the current message's attachments): descendants read
+ * the attachment through `s.attachment`.
+ */
+export const AttachmentByIndexProvider = defineComponent({
+  name: "AttachmentByIndexProvider",
+  props: {
+    source: {
+      type: String as PropType<"composer" | "message">,
+      required: true,
+    },
+    index: {
+      type: Number,
+      required: true,
+    },
+  },
+  slots: Object as SlotsType<{ default?: () => VNodeChild[] }>,
+  setup(props, { slots }) {
+    const aui = useAui();
+    let disposed = false;
+    onScopeDispose(() => {
+      disposed = true;
+    });
+    const config = computed(() => {
+      const source = props.source;
+      const index = props.index;
+      const cache = createLastValidCache<AttachmentMethods>(
+        createStaleReporter({
+          name: "AttachmentByIndexProvider",
+          index,
+          isCurrent: () =>
+            !disposed && index === props.index && source === props.source,
+          isValid: () => index < attachmentCountOf(aui, source),
+        }),
+      );
+      return AuiConfig({
+        attachment: Derived({
+          source,
+          query: { type: "index", index },
+          get: (aui) =>
+            cache.resolve(index < attachmentCountOf(aui, source), () =>
+              attachmentSourceOf(aui, source).attachment({ index }),
+            ),
+        }),
+      });
+    });
+    return () =>
+      h(
+        AuiProvider,
+        { config: config.value, extends: aui },
+        { default: () => slots.default?.() },
+      );
+  },
+});

package/src/primitives/ChainOfThoughtPrimitiveAccordionTrigger.test.ts

@@ -0,0 +1,105 @@
+import { describe, expect, it, vi } from "vitest";
+import { createApp, defineComponent, h, nextTick } from "vue";
+import { flushTapSync } from "@assistant-ui/tap";
+import { AuiConfig } from "@assistant-ui/store/client";
+import {
+  ChainOfThoughtClient,
+  type ChainOfThoughtPart,
+} from "@assistant-ui/core/store";
+import { AuiProvider } from "../AuiProvider";
+import { useAuiState } from "../useAuiState";
+import { ChainOfThoughtPrimitiveAccordionTrigger } from "./ChainOfThoughtPrimitiveAccordionTrigger";
+
+const parts: readonly ChainOfThoughtPart[] = [
+  { type: "reasoning", text: "thinking", status: { type: "complete" } },
+];
+
+const StateProbe = defineComponent({
+  setup() {
+    const collapsed = useAuiState((s) => s.chainOfThought.collapsed);
+    return () => h("span", { class: "collapsed" }, String(collapsed.value));
+  },
+});
+
+const mountTrigger = (props: Record<string, unknown> = {}) => {
+  const app = createApp(
+    defineComponent({
+      setup: () => () =>
+        h(
+          AuiProvider,
+          {
+            config: AuiConfig({
+              chainOfThought: ChainOfThoughtClient({
+                parts,
+                getMessagePart: () => {
+                  throw new Error("Part access is not needed by this test.");
+                },
+              }),
+            }),
+          },
+          {
+            default: () =>
+              h("div", [
+                h(ChainOfThoughtPrimitiveAccordionTrigger, props, {
+                  default: () => "Toggle",
+                }),
+                h(StateProbe),
+              ]),
+          },
+        ),
+    }),
+  );
+  const el = document.createElement("div");
+  app.mount(el);
+  return { el, unmount: () => app.unmount() };
+};
+
+describe("ChainOfThoughtPrimitiveAccordionTrigger", () => {
+  it("toggles the collapsed state", async () => {
+    const { el, unmount } = mountTrigger();
+    const button = el.querySelector<HTMLButtonElement>("button")!;
+
+    expect(el.querySelector("span.collapsed")?.textContent).toBe("true");
+    button.click();
+    await vi.waitFor(async () => {
+      await nextTick();
+      expect(el.querySelector("span.collapsed")?.textContent).toBe("false");
+    });
+    button.click();
+    await vi.waitFor(async () => {
+      await nextTick();
+      expect(el.querySelector("span.collapsed")?.textContent).toBe("true");
+    });
+
+    unmount();
+  });
+
+  it("respects caller vetoes", async () => {
+    const { el, unmount } = mountTrigger({
+      onClick: (event: MouseEvent) => event.preventDefault(),
+    });
+
+    el.querySelector<HTMLButtonElement>("button")!.click();
+    await nextTick();
+    expect(el.querySelector("span.collapsed")?.textContent).toBe("true");
+
+    unmount();
+  });
+
+  it("stays disabled when the disabled attribute is set", async () => {
+    const { el, unmount } = mountTrigger({ disabled: true });
+    const button = el.querySelector<HTMLButtonElement>("button")!;
+
+    expect(button.disabled).toBe(true);
+    flushTapSync(() => button.click());
+    await nextTick();
+    expect(el.querySelector("span.collapsed")?.textContent).toBe("true");
+
+    button.disabled = false;
+    flushTapSync(() => button.click());
+    await nextTick();
+    expect(el.querySelector("span.collapsed")?.textContent).toBe("true");
+
+    unmount();
+  });
+});

package/src/primitives/ChainOfThoughtPrimitiveAccordionTrigger.ts

@@ -0,0 +1,38 @@
+import {
+  defineComponent,
+  h,
+  mergeProps,
+  type SlotsType,
+  type VNodeChild,
+} from "vue";
+import { useAui } from "../useAui";
+import { useAuiState } from "../useAuiState";
+import { isAttrDisabled } from "./attrDisabled";
+
+/**
+ * A button that toggles the collapsed state of the chain of thought accordion.
+ * Caller listeners run first and can veto the toggle via `preventDefault`.
+ */
+export const ChainOfThoughtPrimitiveAccordionTrigger = defineComponent({
+  name: "ChainOfThoughtPrimitiveAccordionTrigger",
+  inheritAttrs: false,
+  slots: Object as SlotsType<{ default?: () => VNodeChild[] }>,
+  setup(_, { attrs, slots }) {
+    const aui = useAui();
+    const collapsed = useAuiState((s) => s.chainOfThought.collapsed);
+    const onClick = (event: MouseEvent) => {
+      if (event.defaultPrevented || isAttrDisabled(attrs)) return;
+      aui.chainOfThought.setCollapsed(!collapsed.value);
+    };
+    return () =>
+      h(
+        "button",
+        mergeProps(attrs, {
+          type: "button",
+          disabled: isAttrDisabled(attrs),
+          onClick,
+        }),
+        slots.default?.(),
+      );
+  },
+});

package/src/primitives/ChainOfThoughtPrimitiveParts.test.ts

@@ -0,0 +1,254 @@
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { computed, createApp, defineComponent, h, nextTick } from "vue";
+import { AuiConfig } from "@assistant-ui/store/client";
+import {
+  ChainOfThoughtClient,
+  RuntimeAdapter,
+  type ChainOfThoughtPart,
+  type PartState,
+} from "@assistant-ui/core/store";
+import type {
+  ExternalStoreAdapter,
+  ThreadMessageLike,
+} from "@assistant-ui/core";
+import {
+  AssistantRuntimeImpl,
+  ExternalStoreRuntimeCore,
+} from "@assistant-ui/core/internal";
+import { AuiProvider } from "../AuiProvider";
+import { useAui } from "../useAui";
+import { useAuiState } from "../useAuiState";
+import { ThreadPrimitiveMessages } from "./ThreadPrimitiveMessages";
+import { ChainOfThoughtPrimitiveParts } from "./ChainOfThoughtPrimitiveParts";
+
+type DemoMessage = {
+  id: string;
+  texts: readonly string[];
+  parts?: ThreadMessageLike["content"];
+};
+
+const convertDemoMessage = (message: DemoMessage) => ({
+  id: message.id,
+  role: "assistant" as const,
+  content:
+    message.parts ??
+    message.texts.map((text) => ({
+      type: "reasoning" as const,
+      text,
+    })),
+});
+
+const createReasoningRuntime = (initial: readonly string[]) => {
+  let messages: DemoMessage[] = [{ id: "a0", texts: initial }];
+  const makeAdapter = (): ExternalStoreAdapter<DemoMessage> => ({
+    messages,
+    isRunning: false,
+    convertMessage: convertDemoMessage,
+    onNew: async () => {},
+  });
+  const core = new ExternalStoreRuntimeCore(makeAdapter());
+  const runtime = new AssistantRuntimeImpl(core);
+  const setTexts = (texts: readonly string[]) => {
+    messages = [{ id: "a0", texts }];
+    core.setAdapter(makeAdapter());
+  };
+  const setParts = (parts: ThreadMessageLike["content"]) => {
+    messages = [{ id: "a0", texts: [], parts }];
+    core.setAdapter(makeAdapter());
+  };
+  return { runtime, setTexts, setParts };
+};
+
+const CollapsedProbe = defineComponent({
+  setup() {
+    const collapsed = useAuiState((s) => s.chainOfThought.collapsed);
+    return () => h("span", { class: "collapsed" }, String(collapsed.value));
+  },
+});
+
+const ExpandButton = defineComponent({
+  setup() {
+    const aui = useAui();
+    return () =>
+      h(
+        "button",
+        {
+          class: "expand",
+          onClick: () => aui.chainOfThought.setCollapsed(false),
+        },
+        "expand",
+      );
+  },
+});
+
+const ChainOfThoughtHost = defineComponent({
+  setup(_, { slots }) {
+    const aui = useAui();
+    const parts = useAuiState((s) => s.message.parts);
+    const config = computed(() =>
+      AuiConfig({
+        chainOfThought: ChainOfThoughtClient({
+          parts: parts.value as readonly ChainOfThoughtPart[],
+          getMessagePart: ({ index }) => aui.message.part({ index }),
+        }),
+      }),
+    );
+    return () =>
+      h(
+        AuiProvider,
+        { config: config.value, extends: aui },
+        { default: () => slots.default?.() },
+      );
+  },
+});
+
+const mountParts = (
+  initial: readonly string[],
+  renderPart: (part: PartState) => ReturnType<typeof h> = (part) =>
+    h(
+      "li",
+      { class: "part" },
+      part.type === "reasoning" ? part.text : part.type,
+    ),
+) => {
+  const { runtime, setTexts, setParts } = createReasoningRuntime(initial);
+  const app = createApp(
+    defineComponent({
+      setup: () => () =>
+        h(
+          AuiProvider,
+          { config: AuiConfig({ threads: RuntimeAdapter(runtime) }) },
+          {
+            default: () =>
+              h("ul", [
+                h(ThreadPrimitiveMessages, null, {
+                  default: () =>
+                    h(ChainOfThoughtHost, null, {
+                      default: () => [
+                        h(ChainOfThoughtPrimitiveParts, null, {
+                          default: ({ part }: { part: PartState }) => [
+                            renderPart(part),
+                          ],
+                        }),
+                        h(CollapsedProbe),
+                        h(ExpandButton),
+                      ],
+                    }),
+                }),
+              ]),
+          },
+        ),
+    }),
+  );
+  const el = document.createElement("div");
+  app.mount(el);
+  return { el, setTexts, setParts, unmount: () => app.unmount() };
+};
+
+const partTexts = (el: HTMLElement) =>
+  [...el.querySelectorAll("li.part")].map((li) => li.textContent);
+
+afterEach(() => {
+  vi.restoreAllMocks();
+});
+
+describe("ChainOfThoughtPrimitiveParts", () => {
+  it("keeps tool-call slot state with its part when chain parts swap", async () => {
+    const mounts = vi.fn();
+    const Tool = defineComponent({
+      setup() {
+        mounts();
+        const initialName = useAuiState((s) =>
+          s.part.type === "tool-call" ? s.part.toolName : "",
+        ).value;
+        return () => h("li", { class: "part" }, initialName);
+      },
+    });
+    const { el, setParts, unmount } = mountParts([], () => h(Tool));
+    const first = {
+      type: "tool-call" as const,
+      toolCallId: "call-a",
+      toolName: "alpha",
+      args: {},
+    };
+    const second = { ...first, toolCallId: "call-b", toolName: "beta" };
+
+    setParts([first, second]);
+    await vi.waitFor(async () => {
+      await nextTick();
+      expect(partTexts(el)).toEqual(["alpha", "beta"]);
+    });
+    expect(mounts).toHaveBeenCalledTimes(2);
+
+    setParts([second, first]);
+    await vi.waitFor(async () => {
+      await nextTick();
+      expect(partTexts(el)).toEqual(["beta", "alpha"]);
+    });
+    expect(mounts).toHaveBeenCalledTimes(2);
+    unmount();
+  });
+
+  it("renders one slot invocation per part with its state", async () => {
+    const { el, unmount } = mountParts(["alpha", "beta"]);
+
+    await vi.waitFor(async () => {
+      await nextTick();
+      expect(partTexts(el)).toEqual(["alpha", "beta"]);
+    });
+
+    unmount();
+  });
+
+  it("renders regardless of the collapsed state, matching the React primitive", async () => {
+    const { el, unmount } = mountParts(["alpha"]);
+
+    await vi.waitFor(async () => {
+      await nextTick();
+      expect(el.querySelector("span.collapsed")?.textContent).toBe("true");
+      expect(partTexts(el)).toEqual(["alpha"]);
+    });
+
+    el.querySelector<HTMLButtonElement>("button.expand")!.click();
+    await vi.waitFor(async () => {
+      await nextTick();
+      expect(el.querySelector("span.collapsed")?.textContent).toBe("false");
+      expect(partTexts(el)).toEqual(["alpha"]);
+    });
+
+    unmount();
+  });
+
+  it("follows a parts shrink and regrowth without crashing", async () => {
+    const error = vi.spyOn(console, "error").mockImplementation(() => {});
+    const { el, setTexts, unmount } = mountParts(["alpha", "beta"]);
+
+    await vi.waitFor(async () => {
+      await nextTick();
+      expect(partTexts(el)).toEqual(["alpha", "beta"]);
+    });
+
+    setTexts(["alpha"]);
+    await vi.waitFor(async () => {
+      await nextTick();
+      expect(partTexts(el)).toEqual(["alpha"]);
+    });
+
+    setTexts(["alpha", "gamma"]);
+    await vi.waitFor(async () => {
+      await nextTick();
+      expect(partTexts(el)).toEqual(["alpha", "gamma"]);
+    });
+
+    const logged = error.mock.calls.map((call) => call.map(String).join(" "));
+    for (const message of logged) {
+      expect(message).toContain("(ignore if recovered)");
+    }
+    expect(logged.join("\n")).not.toContain(
+      "ChainOfThoughtPartByIndexProvider",
+    );
+
+    unmount();
+    error.mockRestore();
+  });
+});

package/src/primitives/ChainOfThoughtPrimitiveParts.ts

@@ -0,0 +1,112 @@
+import {
+  computed,
+  defineComponent,
+  h,
+  onScopeDispose,
+  type SlotsType,
+  type VNodeChild,
+} from "vue";
+import type { PartMethods, PartState } from "@assistant-ui/core/store";
+import { getMessagePartKeys } from "@assistant-ui/core/internal";
+import { AuiConfig, Derived } from "@assistant-ui/store/client";
+import { AuiProvider } from "../AuiProvider";
+import { useAui } from "../useAui";
+import { useAuiState } from "../useAuiState";
+import { createLastValidCache, createStaleReporter } from "./lastValidCache";
+import { useStableKeys } from "./stableKeys";
+
+type ChainOfThoughtPartsSlots = {
+  default?: (props: { part: PartState }) => VNodeChild[];
+};
+
+const ChainOfThoughtPartByIndexProvider = defineComponent({
+  name: "ChainOfThoughtPartByIndexProvider",
+  props: {
+    index: {
+      type: Number,
+      required: true,
+    },
+  },
+  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 cache = createLastValidCache<PartMethods>(
+        createStaleReporter({
+          name: "ChainOfThoughtPartByIndexProvider",
+          index,
+          isCurrent: () => !disposed && index === props.index,
+          isValid: () => index < aui.chainOfThought.getState().parts.length,
+        }),
+      );
+      return AuiConfig({
+        part: Derived({
+          source: "chainOfThought",
+          query: { type: "index", index },
+          // chainOfThought.part() delegates to a userland getMessagePart, so
+          // validity is not decided by parts.length alone; a lookup throw is
+          // absorbed into the stale cache like an invalid index.
+          get: (aui) => {
+            const valid = index < aui.chainOfThought.getState().parts.length;
+            try {
+              return cache.resolve(valid, () =>
+                aui.chainOfThought.part({ index }),
+              );
+            } catch (error) {
+              return cache.resolve(false, () => {
+                throw error;
+              });
+            }
+          },
+        }),
+      });
+    });
+    return () =>
+      h(
+        AuiProvider,
+        { config: config.value, extends: aui },
+        { default: () => slots.default?.() },
+      );
+  },
+});
+
+const ChainOfThoughtPartView = defineComponent({
+  name: "ChainOfThoughtPartView",
+  slots: Object as SlotsType<ChainOfThoughtPartsSlots>,
+  setup(_, { slots }) {
+    const part = useAuiState((s) => s.part);
+    return () => slots.default?.({ part: part.value });
+  },
+});
+
+/**
+ * Renders the parts within a chain of thought through the default slot, one
+ * invocation per entry of `s.chainOfThought.parts`.
+ *
+ * Rendering is not gated on `s.chainOfThought.collapsed`; gate visibility in
+ * the caller (for example with `AuiIf`), matching the React primitive.
+ */
+export const ChainOfThoughtPrimitiveParts = defineComponent({
+  name: "ChainOfThoughtPrimitiveParts",
+  slots: Object as SlotsType<ChainOfThoughtPartsSlots>,
+  setup(_, { slots }) {
+    const parts = useAuiState((s) => s.chainOfThought.parts);
+    const partKeys = useStableKeys(() => getMessagePartKeys(parts.value));
+    return () =>
+      partKeys.value.map((key, index) =>
+        h(
+          ChainOfThoughtPartByIndexProvider,
+          { index, key },
+          {
+            default: () =>
+              h(ChainOfThoughtPartView, null, { default: slots.default }),
+          },
+        ),
+      );
+  },
+});