@copilotkit/vue 2.0.0-rc.2 → 2.0.0-rc.21

package/src/v2/hooks/use-interrupt.ts

@@ -1,7 +1,7 @@
 import { computed, onScopeDispose, shallowRef, watch } from "vue";
 import type { ComputedRef, Ref } from "vue";
-import { buildResumeArray, isInterruptExpired } from "@ag-ui/client";
-import type { Interrupt, RunAgentResult } from "@ag-ui/client";
+import type { Interrupt } from "@ag-ui/client";
+import { ɵInterruptController } from "@copilotkit/core";
 import { useCopilotKit } from "../providers/useCopilotKit";
 import { useAgent } from "./use-agent";
 import type {
@@ -19,21 +19,6 @@ export type {
   Interrupt,
 };
 
-const INTERRUPT_EVENT_NAME = "on_interrupt";
-
-/** Internal accumulator response shape consumed by buildResumeArray. */
-type ResumeResponse =
-  | { status: "resolved"; payload?: unknown }
-  | { status: "cancelled" };
-
-/**
- * Normalized pending interrupt. `legacy` carries the custom-event payload;
- * `standard` carries the AG-UI `outcome:"interrupt"` interrupts array.
- */
-type PendingInterrupt =
-  | { kind: "legacy"; event: InterruptEvent }
-  | { kind: "standard"; interrupts: Interrupt[] };
-
 type InterruptHandlerFn<TValue, TResult> = (
   props: InterruptHandlerProps<TValue>,
 ) => TResult | PromiseLike<TResult>;
@@ -75,38 +60,6 @@ export interface UseInterruptResult<TValue = unknown, TResult = never> {
   > | null>;
 }
 
-export function isPromiseLike<TValue>(
-  value: TValue | PromiseLike<TValue>,
-): value is PromiseLike<TValue> {
-  return (
-    (typeof value === "object" || typeof value === "function") &&
-    value !== null &&
-    typeof Reflect.get(value, "then") === "function"
-  );
-}
-
-function normalizeAsyncResult<TValue>(
-  value: PromiseLike<TValue>,
-): Promise<TValue> {
-  if (value instanceof Promise) {
-    return value;
-  }
-
-  return new Promise<TValue>((resolve, reject) => {
-    try {
-      value.then(resolve, reject);
-    } catch (error) {
-      reject(error);
-    }
-  });
-}
-
-/** Derive the legacy-compatible `event` for any pending interrupt. */
-function toLegacyEvent(pending: PendingInterrupt): InterruptEvent {
-  if (pending.kind === "legacy") return pending.event;
-  return { name: INTERRUPT_EVENT_NAME, value: pending.interrupts[0] };
-}
-
 /**
  * Vue composable for handling agent interrupts with optional filtering,
  * preprocessing, and resume behavior.
@@ -131,262 +84,33 @@ export function useInterrupt<TValue = unknown, TResult = never>(
 ): UseInterruptResult<TValue, TResult> {
   const { copilotkit } = useCopilotKit();
   const { agent } = useAgent({ agentId: config.agentId });
-  const pending = shallowRef<PendingInterrupt | null>(null);
-  const result = shallowRef<InterruptResult<TValue, TResult>>(null);
-
-  // Accumulated per-interrupt responses for the current standard interrupt set.
-  const responses: Record<string, ResumeResponse> = {};
-
-  watch(
-    agent,
-    (resolvedAgent, _previousAgent, onCleanup) => {
-      if (!resolvedAgent) {
-        pending.value = null;
-        result.value = null;
-        return;
-      }
 
-      let localLegacy: InterruptEvent<TValue> | null = null;
-      let localStandard: Interrupt[] | null = null;
-
-      const subscription = resolvedAgent.subscribe({
-        onCustomEvent: ({ event }) => {
-          if (event.name === INTERRUPT_EVENT_NAME) {
-            localLegacy = {
-              name: event.name,
-              value: event.value as TValue,
-            };
-          }
-        },
-        onRunFinishedEvent: (params) => {
-          if (params.outcome === "interrupt") {
-            localStandard = params.interrupts;
-          }
-        },
-        onRunStartedEvent: () => {
-          localLegacy = null;
-          localStandard = null;
-          // Reset accumulated responses for the new run.
-          for (const k of Object.keys(responses)) {
-            delete responses[k];
-          }
-          pending.value = null;
-        },
-        onRunFinalized: () => {
-          // Standard wins if both somehow appear for one run.
-          if (localStandard && localStandard.length > 0) {
-            pending.value = { kind: "standard", interrupts: localStandard };
-          } else if (localLegacy) {
-            pending.value = { kind: "legacy", event: localLegacy };
-          }
-          localLegacy = null;
-          localStandard = null;
-        },
-        onRunFailed: () => {
-          localLegacy = null;
-          localStandard = null;
-          for (const k of Object.keys(responses)) {
-            delete responses[k];
-          }
-          pending.value = null;
-        },
-      });
-
-      onCleanup(() => subscription.unsubscribe());
+  const controller = new ɵInterruptController<
+    TValue,
+    InterruptResult<TValue, TResult>
+  >(
+    { runAgent: (params) => copilotkit.value.runAgent(params) },
+    {
+      enabled: (event) => config.enabled?.(event) ?? true,
+      handler: (props) => (config.handler ? config.handler(props) : null),
     },
-    { immediate: true },
   );
-
-  /** Submit the accumulated standard responses once all open interrupts are addressed. */
-  const submitStandardIfComplete = async (
-    interrupts: Interrupt[],
-  ): Promise<RunAgentResult | void> => {
-    const allAddressed = interrupts.every((i) => responses[i.id]);
-    if (!allAddressed) return;
-
-    const expired = interrupts.find((i) => isInterruptExpired(i));
-    if (expired) {
-      console.error(
-        `[CopilotKit] useInterrupt: interrupt ${expired.id} expired at ${expired.expiresAt}; not resuming.`,
-      );
-      for (const k of Object.keys(responses)) {
-        delete responses[k];
-      }
-      pending.value = null;
-      return;
-    }
-
-    const resume = buildResumeArray(interrupts, responses);
-    for (const k of Object.keys(responses)) {
-      delete responses[k];
-    }
-    const resolvedAgent = agent.value;
-    if (!resolvedAgent) return;
-    try {
-      return await copilotkit.value.runAgent({ agent: resolvedAgent, resume });
-    } catch (err) {
-      console.error(
-        "[CopilotKit] useInterrupt resolve: runAgent rejected; clearing pending + rethrowing",
-        err,
-      );
-      pending.value = null;
-      throw err;
-    }
-  };
-
-  const resolve: InterruptResolveFn = async (payload?, interruptId?) => {
-    const current = pending.value;
-    if (!current) return;
-
-    const resolvedAgent = agent.value;
-    if (!resolvedAgent) return;
-
-    if (current.kind === "legacy") {
-      const interruptEventValue = current.event.value;
-      try {
-        return await copilotkit.value.runAgent({
-          agent: resolvedAgent,
-          forwardedProps: {
-            command: {
-              resume: payload,
-              interruptEvent: interruptEventValue,
-            },
-          },
-        });
-      } catch (err) {
-        console.error(
-          "[CopilotKit] useInterrupt resolve: runAgent rejected; clearing pending + rethrowing",
-          err,
-        );
-        pending.value = null;
-        throw err;
-      }
-    }
-
-    if (current.interrupts.length > 1 && interruptId === undefined) {
-      console.warn(
-        `[CopilotKit] useInterrupt: resolve()/cancel() called without an interruptId while ${current.interrupts.length} interrupts are open; defaulting to the first. Pass an interruptId to address a specific interrupt.`,
-      );
-    }
-    const id = interruptId ?? current.interrupts[0]?.id;
-    if (!id) return;
-    responses[id] = { status: "resolved", payload };
-    return submitStandardIfComplete(current.interrupts);
-  };
-
-  const cancel: InterruptCancelFn = async (interruptId?) => {
-    const current = pending.value;
-    if (!current) return;
-
-    if (current.kind === "legacy") {
-      // Legacy interrupts have no cancel semantics; dismiss without resuming.
-      console.warn(
-        "[CopilotKit] useInterrupt: cancel() is not supported for legacy on_interrupt interrupts; dismissing.",
-      );
-      pending.value = null;
-      return;
-    }
-
-    if (current.interrupts.length > 1 && interruptId === undefined) {
-      console.warn(
-        `[CopilotKit] useInterrupt: resolve()/cancel() called without an interruptId while ${current.interrupts.length} interrupts are open; defaulting to the first. Pass an interruptId to address a specific interrupt.`,
-      );
-    }
-    const id = interruptId ?? current.interrupts[0]?.id;
-    if (!id) return;
-    responses[id] = { status: "cancelled" };
-    return submitStandardIfComplete(current.interrupts);
-  };
-
-  // Keep resolveInterrupt and cancelInterrupt as aliases for back-compat.
-  const resolveInterrupt: InterruptResolveFn = resolve;
-  const cancelInterrupt: InterruptCancelFn = cancel;
+  const snapshot = shallowRef(controller.getSnapshot());
+  controller.subscribe(() => {
+    snapshot.value = controller.getSnapshot();
+  });
 
   watch(
-    pending,
-    (currentPending, _previous, onCleanup) => {
-      if (!currentPending) {
-        result.value = null;
-        return;
-      }
-      const legacyEvent = toLegacyEvent(
-        currentPending,
-      ) as InterruptEvent<TValue>;
-      if (config.enabled && !config.enabled(legacyEvent)) {
-        result.value = null;
-        return;
-      }
-      const handler = config.handler;
-      if (!handler) {
-        result.value = null;
-        return;
-      }
-
-      let cancelled = false;
-      const maybePromise = handler({
-        event: legacyEvent,
-        interrupt:
-          currentPending.kind === "standard"
-            ? (currentPending.interrupts[0] ?? null)
-            : null,
-        interrupts:
-          currentPending.kind === "standard" ? currentPending.interrupts : [],
-        resolve,
-        cancel,
-      });
-
-      if (isPromiseLike(maybePromise)) {
-        normalizeAsyncResult(maybePromise)
-          .then((resolved) => {
-            if (!cancelled) {
-              result.value = resolved;
-            }
-          })
-          .catch((err) => {
-            if (!cancelled) {
-              console.error("[CopilotKit] useInterrupt handler failed:", err);
-              result.value = null;
-            }
-          });
-      } else {
-        result.value = maybePromise;
-      }
-
-      onCleanup(() => {
-        cancelled = true;
-      });
+    agent,
+    (resolvedAgent) => {
+      if (resolvedAgent) controller.connect(resolvedAgent);
+      else controller.disconnect();
     },
     { immediate: true },
   );
 
-  // Compute the legacy-compat "interrupt" ref for existing consumers (InterruptEvent shape).
-  const interrupt = computed<InterruptEvent<TValue> | null>(() => {
-    if (!pending.value) return null;
-    return toLegacyEvent(pending.value) as InterruptEvent<TValue>;
-  });
-
-  const slotProps = computed<InterruptRenderProps<
-    TValue,
-    InterruptResult<TValue, TResult>
-  > | null>(() => {
-    const currentPending = pending.value;
-    if (!currentPending) return null;
-    const legacyEvent = toLegacyEvent(currentPending) as InterruptEvent<TValue>;
-    if (config.enabled && !config.enabled(legacyEvent)) return null;
-
-    return {
-      event: legacyEvent,
-      interrupt:
-        currentPending.kind === "standard"
-          ? (currentPending.interrupts[0] ?? null)
-          : null,
-      interrupts:
-        currentPending.kind === "standard" ? currentPending.interrupts : [],
-      result: result.value,
-      resolve,
-      cancel,
-    };
-  });
+  const { resolve, cancel } = controller;
+  const slotProps = computed(() => snapshot.value.renderProps);
 
   watch(
     [() => copilotkit.value, slotProps, () => config.renderInChat !== false],
@@ -395,10 +119,7 @@ export function useInterrupt<TValue = unknown, TResult = never>(
         return;
       }
 
-      core.setInterruptState(
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        nextSlotProps as InterruptRenderProps<any, any> | null,
-      );
+      core.setInterruptState(nextSlotProps);
       const publishedState = nextSlotProps;
 
       onCleanup(() => {
@@ -420,17 +141,17 @@ export function useInterrupt<TValue = unknown, TResult = never>(
     }
   });
 
+  onScopeDispose(() => controller.dispose());
+
   return {
-    interrupt: interrupt as unknown as Ref<InterruptEvent<TValue> | null>,
-    result: result as Ref<InterruptResult<TValue, TResult>>,
+    interrupt: computed(() => slotProps.value?.event ?? null),
+    result: computed(() => snapshot.value.result),
     hasInterrupt: computed(() => slotProps.value !== null),
     resolve,
-    resolveInterrupt,
+    // Aliases kept for back-compat.
+    resolveInterrupt: resolve,
     cancel,
-    cancelInterrupt,
-    slotProps: slotProps as ComputedRef<InterruptRenderProps<
-      TValue,
-      InterruptResult<TValue, TResult>
-    > | null>,
+    cancelInterrupt: cancel,
+    slotProps,
   };
 }

package/src/v2/hooks/use-keyboard-height.ts

@@ -1,4 +1,6 @@
-import { onBeforeUnmount, onMounted, readonly, ref, type Ref } from "vue";
+import { onBeforeUnmount, onMounted, readonly, ref } from "vue";
+import type { Ref } from "vue";
+import { ɵinitialKeyboardState, ɵwatchKeyboardState } from "@copilotkit/core";
 
 /**
  * Vue-idiomatic result of {@link useKeyboardHeight}. Fields mirror the React
@@ -32,50 +34,25 @@ export interface KeyboardState {
  * ```
  */
 export function useKeyboardHeight(): KeyboardState {
-  const initialHeight = typeof window !== "undefined" ? window.innerHeight : 0;
-  const isKeyboardOpen = ref(false);
-  const keyboardHeight = ref(0);
-  const availableHeight = ref(initialHeight);
-  const viewportHeight = ref(initialHeight);
-
-  const updateKeyboardState = () => {
-    if (typeof window === "undefined") return;
-    const visualViewport = window.visualViewport;
-    if (!visualViewport) return;
-
-    const layoutHeight = window.innerHeight;
-    const visualHeight = visualViewport.height;
-
-    // Keyboard height = layout viewport minus visual viewport, clamped to 0.
-    const nextKeyboardHeight = Math.max(0, layoutHeight - visualHeight);
-    // Only treat the keyboard as open past the 150px threshold, matching
-    // the React implementation's mobile heuristic.
-    const nextIsOpen = nextKeyboardHeight > 150;
-
-    keyboardHeight.value = nextKeyboardHeight;
-    isKeyboardOpen.value = nextIsOpen;
-    availableHeight.value = visualHeight;
-    viewportHeight.value = layoutHeight;
-  };
-
-  let visualViewport: VisualViewport | null = null;
+  const initial = ɵinitialKeyboardState();
+  const isKeyboardOpen = ref(initial.isKeyboardOpen);
+  const keyboardHeight = ref(initial.keyboardHeight);
+  const availableHeight = ref(initial.availableHeight);
+  const viewportHeight = ref(initial.viewportHeight);
+  let stopWatching: (() => void) | undefined;
 
   onMounted(() => {
-    if (typeof window === "undefined") return;
-    visualViewport = window.visualViewport ?? null;
-    if (!visualViewport) return;
-
-    updateKeyboardState();
-
-    visualViewport.addEventListener("resize", updateKeyboardState);
-    visualViewport.addEventListener("scroll", updateKeyboardState);
+    stopWatching = ɵwatchKeyboardState((state) => {
+      keyboardHeight.value = state.keyboardHeight;
+      isKeyboardOpen.value = state.isKeyboardOpen;
+      availableHeight.value = state.availableHeight;
+      viewportHeight.value = state.viewportHeight;
+    });
   });
 
   onBeforeUnmount(() => {
-    if (!visualViewport) return;
-    visualViewport.removeEventListener("resize", updateKeyboardState);
-    visualViewport.removeEventListener("scroll", updateKeyboardState);
-    visualViewport = null;
+    stopWatching?.();
+    stopWatching = undefined;
   });
 
   return {

package/src/v2/hooks/use-pin-to-send.ts

@@ -1,5 +1,6 @@
 import { inject, watch } from "vue";
 import type { Ref } from "vue";
+import { ɵpinMessageToTop } from "@copilotkit/core";
 import {
   LastUserMessageKey,
   createDefaultLastUserMessageRef,
@@ -19,18 +20,10 @@ export interface UsePinToSendOptions {
  * pinned near the top of the viewport while the assistant streams a
  * response beneath it.
  *
- * Implementation parity with React:
- * - Reads the latest user message via the `LastUserMessageContext`
- *   equivalent (`LastUserMessageKey` + `Ref<LastUserMessageState>`).
- * - On each `sendNonce` increment, sizes the spacer to
- *   `viewportHeight - bubbleHeight - topOffset` and scrolls so the bubble
- *   sits `topOffset` from the viewport top (padding above the bubble is
- *   pushed off-screen).
- * - Installs a `ResizeObserver` on `contentRef` that adjusts the spacer in
- *   both directions as content below the anchored message changes, keeping
- *   the bubble pinned.
- * - Cancels the scheduled `requestAnimationFrame` and disconnects the
- *   `ResizeObserver` on subsequent re-runs and on scope dispose.
+ * Reads the latest user message via `LastUserMessageKey` and, on each
+ * `sendNonce` increment, runs core's `ɵpinMessageToTop`, which sizes the
+ * spacer, scrolls, and follows the reply's growth. The previous pin stops on
+ * the next run and on scope dispose.
  */
 export function usePinToSend({
   scrollRef,
@@ -45,17 +38,6 @@ export function usePinToSend({
   );
 
   let lastNonce = -1;
-  let raf: number | null = null;
-  let ro: ResizeObserver | null = null;
-
-  function teardown() {
-    if (raf !== null && typeof cancelAnimationFrame === "function") {
-      cancelAnimationFrame(raf);
-    }
-    raf = null;
-    ro?.disconnect();
-    ro = null;
-  }
 
   watch(
     [
@@ -67,90 +49,24 @@ export function usePinToSend({
       () => topOffset,
     ],
     ([id, sendNonce, scrollEl, contentEl, spacerEl], _old, onCleanup) => {
-      // Always tear down the previous run's RAF / ResizeObserver before
-      // evaluating any of the early-exit guards below. Mirrors React
-      // `useEffect` cleanup semantics: the prior run's cleanup runs before
-      // the next callback executes regardless of why the deps changed.
-      // Without this, a reactive `autoScroll` mode change (e.g. switching
-      // away from `"pin-to-send"`) or a `ref` swap that doesn't bump
-      // `sendNonce` would leak the stale content-element observer because
-      // the nonce guard skips the body. Registering via `onCleanup` also
-      // covers watcher stop on scope dispose, so an explicit
-      // `onScopeDispose(teardown)` is no longer required.
-      onCleanup(teardown);
-
       if (sendNonce === lastNonce) return;
       lastNonce = sendNonce;
 
       if (!id) return;
       if (!scrollEl || !contentEl || !spacerEl) return;
 
-      const escaped =
-        typeof CSS !== "undefined" && typeof CSS.escape === "function"
-          ? CSS.escape(id)
-          : id.replace(/[!"#$%&'()*+,./:;<=>?@[\\\]^`{|}~]/g, "\\$&");
-      const targetEl = contentEl.querySelector<HTMLElement>(
-        `[data-message-id="${escaped}"]`,
+      // Registered through `onCleanup`, so the previous pin stops before the
+      // next run and when the watcher stops on scope dispose.
+      onCleanup(
+        ɵpinMessageToTop({
+          scrollEl,
+          contentEl,
+          spacerEl,
+          messageId: id,
+          topOffset,
+        }),
       );
-      if (!targetEl) return;
-
-      // The target message's element has a top padding (e.g. `pt-10`) that
-      // creates breathing room above the visible bubble. When we "anchor at
-      // the top", we mean anchor the *bubble*, not the element's padded box.
-      // So we scroll past the padding (it goes above the viewport, hiding
-      // whatever was above the element too — including the previous message's
-      // trailing copy button).
-      const viewportHeight = scrollEl.clientHeight;
-      const userMessageHeight = targetEl.getBoundingClientRect().height;
-      const paddingTop = parseFloat(getComputedStyle(targetEl).paddingTop) || 0;
-      const bubbleHeight = Math.max(0, userMessageHeight - paddingTop);
-      const spacerHeight = Math.max(
-        0,
-        viewportHeight - bubbleHeight - topOffset,
-      );
-
-      spacerEl.style.height = `${spacerHeight}px`;
-
-      if (typeof requestAnimationFrame === "function") {
-        raf = requestAnimationFrame(() => {
-          // Scroll so the BUBBLE is `topOffset` from the viewport top — the
-          // padding above the bubble ends up scrolled off-screen.
-          const targetTop =
-            computeOffsetTop(targetEl, scrollEl) + paddingTop - topOffset;
-          scrollEl.scrollTo({
-            top: Math.max(0, targetTop),
-            behavior: "smooth",
-          });
-        });
-      }
-
-      // As content below the anchored user message changes, adjust the spacer
-      // by the same amount so total scrollable space below the bubble stays
-      // constant and the bubble stays pinned.
-      if (typeof ResizeObserver !== "undefined") {
-        ro = new ResizeObserver(() => {
-          if (!contentEl || !spacerEl || !scrollEl) return;
-          const contentHeight = contentEl.getBoundingClientRect().height;
-          const targetOffsetWithinContent = computeOffsetTop(
-            targetEl,
-            contentEl,
-          );
-          const consumedBelow =
-            contentHeight - targetOffsetWithinContent - userMessageHeight;
-          const remaining = Math.max(0, spacerHeight - consumedBelow);
-          spacerEl.style.height = `${remaining}px`;
-        });
-        ro.observe(contentEl);
-      }
     },
     { immediate: true, flush: "post" },
   );
 }
-
-// Compute the offset of el relative to stopAt, accounting for stopAt's current scrollTop.
-// Uses getBoundingClientRect so it works regardless of CSS positioning (including position:static).
-function computeOffsetTop(el: HTMLElement, stopAt: HTMLElement): number {
-  const elRect = el.getBoundingClientRect();
-  const stopRect = stopAt.getBoundingClientRect();
-  return elRect.top - stopRect.top + stopAt.scrollTop;
-}