@assistant-ui/vue 0.0.0 → 0.0.2

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

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,70 @@
+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 ||
+        event.keyCode === 229
+      )
+        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,167 @@
+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"];
+  /** @deprecated Experimental since 2026-09-23. Not scheduled for removal; the API may change in any release. */
+  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?.() },
+      );
+  },
+});