@assistant-ui/vue 0.0.0-stage → 0.0.1

package/src/primitives/ComposerPrimitiveCancel.ts

@@ -0,0 +1,41 @@
+import {
+  defineComponent,
+  h,
+  mergeProps,
+  type SlotsType,
+  type VNodeChild,
+} from "vue";
+import { composerCancelDisabled } from "@assistant-ui/core/store/internal";
+import { isAttrDisabled } from "./attrDisabled";
+import { useAui } from "../useAui";
+import { useAuiState } from "../useAuiState";
+
+/**
+ * A button that cancels the current run. Disabled while nothing can be
+ * cancelled. A fallthrough click listener runs first and can veto the cancel
+ * with `preventDefault`.
+ */
+export const ComposerPrimitiveCancel = defineComponent({
+  name: "ComposerPrimitiveCancel",
+  inheritAttrs: false,
+  slots: Object as SlotsType<{ default?: () => VNodeChild[] }>,
+  setup(_, { attrs, slots }) {
+    const aui = useAui();
+    const disabled = useAuiState(composerCancelDisabled);
+    const onClick = (event: MouseEvent) => {
+      if (event.defaultPrevented || disabled.value || isAttrDisabled(attrs))
+        return;
+      aui.composer.cancel();
+    };
+    return () =>
+      h(
+        "button",
+        mergeProps(attrs, {
+          type: "button",
+          disabled: disabled.value || isAttrDisabled(attrs),
+          onClick,
+        }),
+        slots.default?.(),
+      );
+  },
+});

package/src/primitives/ComposerPrimitiveInput.ts

@@ -0,0 +1,64 @@
+import { defineComponent, h, mergeProps, type SlotsType } from "vue";
+import { flushTapSync } from "@assistant-ui/tap";
+import { composerInputDisabled } from "@assistant-ui/core/store/internal";
+import { isAttrDisabled } from "./attrDisabled";
+import { useAui } from "../useAui";
+import { useAuiState } from "../useAuiState";
+import { useComposerSendState } from "./useComposerSendState";
+
+/**
+ * A textarea bound to the composer text, disabled while the thread is
+ * disabled. Enter submits (Shift+Enter inserts a newline, IME composition is
+ * ignored) unless `submitOnEnter` is false; an Enter that cannot send falls
+ * through to a newline, and a fallthrough keydown listener can veto the
+ * submit with `preventDefault`. While the composer is not editing (an edit
+ * composer before `beginEdit`), the value stays controlled to the empty
+ * composer text.
+ */
+export const ComposerPrimitiveInput = defineComponent({
+  name: "ComposerPrimitiveInput",
+  inheritAttrs: false,
+  props: {
+    submitOnEnter: {
+      type: Boolean,
+      default: true,
+    },
+  },
+  slots: Object as SlotsType<Record<string, never>>,
+  setup(props, { attrs }) {
+    const aui = useAui();
+    const text = useAuiState((s) =>
+      s.composer.isEditing ? s.composer.text : "",
+    );
+    const threadDisabled = useAuiState(composerInputDisabled);
+    const { disabled, send } = useComposerSendState();
+
+    const onInput = (event: Event) => {
+      const target = event.target as HTMLTextAreaElement;
+      if (!aui.composer.getState().isEditing) {
+        target.value = text.value;
+        return;
+      }
+      flushTapSync(() => aui.composer.setText(target.value));
+    };
+    const onKeydown = (event: KeyboardEvent) => {
+      if (event.defaultPrevented || !props.submitOnEnter) return;
+      if (event.key !== "Enter" || event.shiftKey || event.isComposing) return;
+      if (disabled.value || threadDisabled.value || isAttrDisabled(attrs))
+        return;
+      event.preventDefault();
+      send();
+    };
+
+    return () =>
+      h(
+        "textarea",
+        mergeProps({ name: "input" }, attrs, {
+          value: text.value,
+          disabled: threadDisabled.value || isAttrDisabled(attrs),
+          onInput,
+          onKeydown,
+        }),
+      );
+  },
+});

package/src/primitives/ComposerPrimitiveSend.ts

@@ -0,0 +1,39 @@
+import {
+  defineComponent,
+  h,
+  mergeProps,
+  type SlotsType,
+  type VNodeChild,
+} from "vue";
+import { isAttrDisabled } from "./attrDisabled";
+import { useComposerSendState } from "./useComposerSendState";
+
+/**
+ * A button that sends the composer. Disabled while the composer cannot send,
+ * or while a run is in flight and the runtime does not queue sends. A
+ * fallthrough click listener runs first and can veto the send with
+ * `preventDefault`.
+ */
+export const ComposerPrimitiveSend = defineComponent({
+  name: "ComposerPrimitiveSend",
+  inheritAttrs: false,
+  slots: Object as SlotsType<{ default?: () => VNodeChild[] }>,
+  setup(_, { attrs, slots }) {
+    const { disabled, send } = useComposerSendState();
+    const onClick = (event: MouseEvent) => {
+      if (event.defaultPrevented || disabled.value || isAttrDisabled(attrs))
+        return;
+      send();
+    };
+    return () =>
+      h(
+        "button",
+        mergeProps(attrs, {
+          type: "button",
+          disabled: disabled.value || isAttrDisabled(attrs),
+          onClick,
+        }),
+        slots.default?.(),
+      );
+  },
+});

package/src/primitives/MessageByIdProvider.ts

@@ -0,0 +1,89 @@
+import {
+  computed,
+  defineComponent,
+  h,
+  onScopeDispose,
+  type SlotsType,
+  type VNodeChild,
+} from "vue";
+import {
+  AuiConfig,
+  Derived,
+  type AssistantClient,
+} from "@assistant-ui/store/client";
+import type { ComposerMethods, MessageMethods } from "@assistant-ui/core/store";
+import { AuiProvider } from "../AuiProvider";
+import { useAui } from "../useAui";
+import { createLastValidCache, createStaleReporter } from "./lastValidCache";
+
+const idSets = new WeakMap<readonly { id: string }[], Set<string>>();
+
+const hasMessage = (aui: AssistantClient, id: string) => {
+  const messages = aui.thread.getState().messages;
+  let set = idSets.get(messages);
+  if (!set) {
+    set = new Set(messages.map((message) => message.id));
+    idSets.set(messages, set);
+  }
+  return set.has(id);
+};
+
+/**
+ * Scopes the subtree to the thread message with `id`: descendants read the
+ * message through `s.message` and its edit composer through `s.composer`.
+ * The scope follows the message's identity rather than a positional slot, so
+ * it pairs with id-keyed iteration.
+ */
+export const MessageByIdProvider = defineComponent({
+  name: "MessageByIdProvider",
+  props: {
+    id: {
+      type: String,
+      required: true,
+    },
+  },
+  slots: Object as SlotsType<{ default?: () => VNodeChild[] }>,
+  setup(props, { slots }) {
+    const aui = useAui();
+    let disposed = false;
+    onScopeDispose(() => {
+      disposed = true;
+    });
+    const config = computed(() => {
+      const id = props.id;
+      const messageCache = createLastValidCache<MessageMethods>(
+        createStaleReporter({
+          name: "MessageByIdProvider",
+          index: id,
+          isCurrent: () => !disposed && id === props.id,
+          isValid: () => hasMessage(aui, id),
+        }),
+      );
+      const composerCache = createLastValidCache<ComposerMethods>(null);
+      return AuiConfig({
+        message: Derived({
+          source: "thread",
+          query: { type: "id", id },
+          get: (aui) =>
+            messageCache.resolve(hasMessage(aui, id), () =>
+              aui.thread.message({ id }),
+            ),
+        }),
+        composer: Derived({
+          source: "message",
+          query: {},
+          get: (aui) =>
+            composerCache.resolve(hasMessage(aui, id), () =>
+              aui.thread.message({ id }).composer(),
+            ),
+        }),
+      });
+    });
+    return () =>
+      h(
+        AuiProvider,
+        { config: config.value, extends: aui },
+        { default: () => slots.default?.() },
+      );
+  },
+});

package/src/primitives/MessagePrimitiveParts.tool-interaction.test.ts

@@ -0,0 +1,88 @@
+import { createApp, defineComponent, h, type PropType } from "vue";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import type { ToolUIProps } from "./MessagePrimitiveParts";
+import { MessagePrimitiveParts } from "./MessagePrimitiveParts";
+
+const fixture = vi.hoisted(() => ({
+  recordInteraction: vi.fn(),
+  part: {
+    type: "tool-call",
+    toolCallId: "call-1",
+    toolName: "weather",
+    args: {},
+    argsText: "{}",
+    status: { type: "complete" },
+  },
+  state: {
+    message: { parts: [] as unknown[] },
+    optional: { tools: { toolUIs: {} as Record<string, unknown> } },
+  },
+}));
+
+vi.mock("../useAui", async (importOriginal) => ({
+  ...(await importOriginal<typeof import("../useAui")>()),
+  useAui: () => ({
+    part: {
+      addToolResult: vi.fn(),
+      resumeToolCall: vi.fn(),
+      respondToToolApproval: vi.fn(),
+      unstable_recordInteraction: fixture.recordInteraction,
+    },
+  }),
+}));
+
+vi.mock("../useAuiState", async (importOriginal) => ({
+  ...(await importOriginal<typeof import("../useAuiState")>()),
+  useAuiState: <T>(selector: (state: unknown) => T) => ({
+    get value() {
+      return selector({ ...fixture.state, part: fixture.part });
+    },
+  }),
+}));
+
+vi.mock("./PartByIndexProvider", async (importOriginal) => {
+  const { defineComponent } = await import("vue");
+  return {
+    ...(await importOriginal<typeof import("./PartByIndexProvider")>()),
+    PartByIndexProvider: defineComponent({
+      setup(_, { slots }) {
+        return () => slots.default?.();
+      },
+    }),
+  };
+});
+
+const interaction = { type: "action" as const, payload: { choice: "retry" } };
+
+let app: ReturnType<typeof createApp> | undefined;
+
+beforeEach(() => {
+  fixture.recordInteraction.mockReset();
+  fixture.state.message.parts = [fixture.part];
+  fixture.state.optional.tools.toolUIs = {};
+});
+
+afterEach(() => app?.unmount());
+
+describe("MessagePrimitiveParts", () => {
+  it("forwards unstable_recordInteraction to a registered tool UI", () => {
+    const Tool = defineComponent({
+      props: {
+        tool: { type: Object as PropType<ToolUIProps>, required: true },
+      },
+      setup(props) {
+        return () => {
+          void props.tool.unstable_recordInteraction?.(interaction);
+          return h("span", "weather");
+        };
+      },
+    });
+    fixture.state.optional.tools.toolUIs = { weather: [{ render: Tool }] };
+    const target = document.createElement("div");
+    app = createApp(MessagePrimitiveParts);
+
+    app.mount(target);
+
+    expect(fixture.recordInteraction).toHaveBeenCalledWith(interaction);
+  });
+});

package/src/primitives/MessagePrimitiveParts.ts

@@ -0,0 +1,166 @@
+import {
+  defineComponent,
+  h,
+  type Component,
+  type SlotsType,
+  type VNodeChild,
+} from "vue";
+import { isMcpAppUri } from "@assistant-ui/core";
+import { getMessagePartKeys } from "@assistant-ui/core/internal";
+import {
+  resolveToolCallText,
+  type PartMethods,
+} from "@assistant-ui/core/store";
+import { isDevelopment } from "@assistant-ui/core/store/internal";
+import type { AssistantState } from "@assistant-ui/store/client";
+import { useAui } from "../useAui";
+import { useAuiState } from "../useAuiState";
+import { PartByIndexProvider } from "./PartByIndexProvider";
+import { useStableKeys } from "./stableKeys";
+
+const warnedTypes = new Set<string>();
+
+export const clearPartWarningsForTesting = () => warnedTypes.clear();
+
+/**
+ * The value of the single `tool` prop passed to a tool UI registered in the
+ * `tools` scope. React spreads the part state as individual props; in Vue any
+ * prop the component does not declare falls through to `$attrs` and gets
+ * stringified onto its root element, so the Vue face passes one `tool` object
+ * instead, which a component always declares in full. The tools scope
+ * declares renderers as React's `ToolCallMessagePartComponent`, so the Vue
+ * face bridges the seam with casts at registration and render; a genuine
+ * React renderer arriving through a shared toolkit type-checks at `setToolUI`
+ * and then fails when invoked as a Vue component. This type is the Vue-facing
+ * contract for custom components. Toolkit `renderText` descriptors resolve
+ * through the neutral resolver and render string or number results directly;
+ * a react-element-valued descriptor is react-only and renders nothing here.
+ */
+export type ToolUIProps = {
+  part: Extract<AssistantState["part"], { type: "tool-call" }>;
+  addResult: PartMethods["addToolResult"];
+  resume: PartMethods["resumeToolCall"];
+  respondToApproval: PartMethods["respondToToolApproval"];
+  unstable_recordInteraction?: PartMethods["unstable_recordInteraction"];
+};
+
+/** The value of the single `data` prop passed to a Vue data renderer. */
+export type DataUIProps<T = unknown> = {
+  part: Omit<Extract<AssistantState["part"], { type: "data" }>, "data"> & {
+    data: T;
+  };
+};
+
+/**
+ * Renders the current message's content parts in order, each scoped through
+ * {@link PartByIndexProvider}. A `tool-call` part first resolves a renderer
+ * registered in the `tools` scope by tool name (`aui.tools.setToolUI`, or a
+ * `Tools({ toolkit })` config entry) and renders it with a single `tool` prop
+ * of type {@link ToolUIProps}.
+ * Otherwise a slot named after the part type (`text`, `reasoning`,
+ * `tool-call`, ...) renders that part; the `default` slot is the fallback for
+ * types without a named slot, except text, which always renders its text
+ * unless a `text` slot overrides it.
+ */
+export const MessagePrimitiveParts = defineComponent({
+  name: "MessagePrimitiveParts",
+  slots: Object as SlotsType<Record<string, (() => VNodeChild[]) | undefined>>,
+  setup(_, { slots }) {
+    const parts = useAuiState((s) => s.message.parts);
+    const partKeys = useStableKeys(() => getMessagePartKeys(parts.value));
+    const PartView = defineComponent({
+      name: "MessagePartView",
+      setup() {
+        const aui = useAui();
+        const type = useAuiState((s) => s.part.type);
+        const text = useAuiState((s) =>
+          s.part.type === "text" ? s.part.text : "",
+        );
+        const toolUI = useAuiState((s) => {
+          if (s.part.type !== "tool-call") return null;
+          return s.optional.tools?.toolUIs[s.part.toolName]?.[0] ?? null;
+        });
+        const mcpAppRender = useAuiState((s) =>
+          s.part.type === "tool-call" &&
+          isMcpAppUri(s.part.mcp?.app?.resourceUri)
+            ? (s.optional.tools?.mcpApp?.render ?? null)
+            : null,
+        );
+        const toolPart = useAuiState((s) =>
+          s.part.type === "tool-call" ? s.part : null,
+        );
+        const dataRenderer = useAuiState((s) => {
+          if (s.part.type !== "data") return null;
+          const named =
+            s.optional.dataRenderers?.renderers[s.part.name]?.[0] ?? null;
+          return named ?? s.optional.dataRenderers?.fallbacks[0] ?? null;
+        });
+        const dataPart = useAuiState((s) =>
+          s.part.type === "data" ? s.part : null,
+        );
+        return () => {
+          if (type.value === "tool-call") {
+            const registration = toolUI.value;
+            const part = toolPart.value;
+            if (registration?.renderText && part) {
+              const resolved = resolveToolCallText(
+                registration.renderText,
+                part,
+              );
+              if (
+                typeof resolved === "string" ||
+                typeof resolved === "number"
+              ) {
+                return resolved;
+              }
+              return null;
+            }
+            const Render = registration?.render ?? mcpAppRender.value;
+            if (Render && part) {
+              return h(Render as unknown as Component, {
+                tool: {
+                  part,
+                  addResult: aui.part.addToolResult,
+                  resume: aui.part.resumeToolCall,
+                  respondToApproval: aui.part.respondToToolApproval,
+                  ...(aui.part.unstable_recordInteraction && {
+                    unstable_recordInteraction:
+                      aui.part.unstable_recordInteraction,
+                  }),
+                } satisfies ToolUIProps,
+              });
+            }
+          }
+          if (type.value === "data") {
+            const Render = dataRenderer.value;
+            const part = dataPart.value;
+            if (Render && part) {
+              return h(Render as unknown as Component, {
+                data: { part } satisfies DataUIProps,
+              });
+            }
+          }
+          if (type.value === "text") {
+            const slot = slots.text;
+            return slot
+              ? slot()
+              : h("p", { style: { whiteSpace: "pre-line" } }, text.value);
+          }
+          const slot = slots[type.value] ?? slots.default;
+          if (slot) return slot();
+          if (isDevelopment && !warnedTypes.has(type.value)) {
+            warnedTypes.add(type.value);
+            console.warn(
+              `MessagePrimitiveParts: no slot for part type "${type.value}"; the part renders nothing. Add a #${type.value} or #default slot.`,
+            );
+          }
+          return null;
+        };
+      },
+    });
+    return () =>
+      partKeys.value.map((key, index) =>
+        h(PartByIndexProvider, { index, key }, { default: () => h(PartView) }),
+      );
+  },
+});

package/src/primitives/PartByIndexProvider.ts

@@ -0,0 +1,62 @@
+import {
+  computed,
+  defineComponent,
+  h,
+  onScopeDispose,
+  type SlotsType,
+  type VNodeChild,
+} from "vue";
+import { AuiConfig, Derived } from "@assistant-ui/store/client";
+import type { PartMethods } from "@assistant-ui/core/store";
+import { AuiProvider } from "../AuiProvider";
+import { useAui } from "../useAui";
+import { createLastValidCache, createStaleReporter } from "./lastValidCache";
+
+/**
+ * Scopes the subtree to the message part at `index`: descendants read the
+ * part through `s.part`.
+ */
+export const PartByIndexProvider = defineComponent({
+  name: "PartByIndexProvider",
+  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: "PartByIndexProvider",
+          index,
+          isCurrent: () => !disposed && index === props.index,
+          isValid: () => index < aui.message.getState().parts.length,
+        }),
+      );
+      return AuiConfig({
+        part: Derived({
+          source: "message",
+          query: { type: "index", index },
+          get: (aui) =>
+            cache.resolve(index < aui.message.getState().parts.length, () =>
+              aui.message.part({ index }),
+            ),
+        }),
+      });
+    });
+    return () =>
+      h(
+        AuiProvider,
+        { config: config.value, extends: aui },
+        { default: () => slots.default?.() },
+      );
+  },
+});

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?.(),
+      );
+  },
+});