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

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;
-}

package/src/v2/hooks/use-render-activity-message.ts

@@ -1,19 +1,11 @@
 import { computed } from "vue";
 import type { Component } from "vue";
 import type { ActivityMessage } from "@ag-ui/core";
-import type { AbstractAgent } from "@ag-ui/client";
+import { ɵresolveActivityRenderer } from "@copilotkit/core";
 import { DEFAULT_AGENT_ID } from "@copilotkit/shared";
 import { useCopilotKit } from "../providers/useCopilotKit";
 import { useCopilotChatConfiguration } from "../providers/useCopilotChatConfiguration";
-import type {
-  VueActivityMessageRenderer,
-  VueActivityMessageRendererProps,
-} from "../types";
-
-interface ActivityRendererResult {
-  renderer: Component<VueActivityMessageRendererProps<unknown>>;
-  props: VueActivityMessageRendererProps<unknown>;
-}
+import type { VueActivityMessageRendererProps } from "../types";
 
 /**
  * Returns helpers for rendering activity messages.
@@ -21,70 +13,57 @@ interface ActivityRendererResult {
  * Matches the React `useRenderActivityMessage` API: `findRenderer` locates a
  * registered renderer by activity type (preferring agent-scoped over global,
  * with `"*"` as a wildcard fallback), and `renderActivityMessage` resolves the
- * renderer and validates the content schema.
+ * renderer and validates the content with the renderer's `content` schema
+ * (any Standard Schema, such as zod).
  */
 export function useRenderActivityMessage() {
   const { copilotkit } = useCopilotKit();
   const config = useCopilotChatConfiguration();
   const agentId = computed(() => config.value?.agentId ?? DEFAULT_AGENT_ID);
 
-  const renderers = computed(() => [
-    ...copilotkit.value.renderActivityMessages,
-  ]);
-
-  function findRenderer(
-    activityType: string,
-  ): VueActivityMessageRenderer<unknown> | null {
-    const list = renderers.value;
-    if (!list.length) {
-      return null;
-    }
-
-    const matches = list.filter(
+  function findRenderer(activityType: string) {
+    const renderers = copilotkit.value.renderActivityMessages;
+    const matches = renderers.filter(
       (renderer) => renderer.activityType === activityType,
     );
 
     return (
       matches.find((candidate) => candidate.agentId === agentId.value) ??
       matches.find((candidate) => candidate.agentId === undefined) ??
-      list.find((candidate) => candidate.activityType === "*") ??
+      renderers.find((candidate) => candidate.activityType === "*") ??
       null
     );
   }
 
-  function renderActivityMessage(
-    message: ActivityMessage,
-  ): ActivityRendererResult | null {
-    const renderer = findRenderer(message.activityType);
-
-    if (!renderer) {
-      return null;
-    }
-
-    const parseResult = renderer.content.safeParse(message.content);
+  function renderActivityMessage(message: ActivityMessage) {
+    const match = ɵresolveActivityRenderer(
+      copilotkit.value.renderActivityMessages,
+      {
+        activityType: message.activityType,
+        agentId: agentId.value,
+        content: message.content,
+      },
+    );
 
-    if (!parseResult.success) {
-      console.warn(
-        `Failed to parse content for activity message ` +
-          `'${message.activityType}':`,
-        parseResult.error,
-      );
+    if (!match) {
+      if (findRenderer(message.activityType)) {
+        console.warn(
+          `Failed to validate content for activity message ` +
+            `'${message.activityType}'.`,
+        );
+      }
       return null;
     }
 
-    const agent: AbstractAgent | undefined = copilotkit.value.getAgent(
-      agentId.value,
-    );
-
     return {
-      renderer: renderer.render as Component<
+      renderer: match.renderer.render as Component<
         VueActivityMessageRendererProps<unknown>
       >,
       props: {
         activityType: message.activityType,
-        content: parseResult.data,
+        content: match.content,
         message,
-        agent,
+        agent: copilotkit.value.getAgent(agentId.value),
       },
     };
   }

package/src/v2/hooks/use-render-custom-messages.ts

@@ -1,5 +1,5 @@
-import type { Component, VNodeChild } from "vue";
 import type { Message } from "@ag-ui/core";
+import { ɵresolveCustomMessageRenderers } from "@copilotkit/core";
 import { DEFAULT_AGENT_ID } from "@copilotkit/shared";
 import { useCopilotKit } from "../providers/useCopilotKit";
 import { useCopilotChatConfiguration } from "../providers/useCopilotChatConfiguration";
@@ -13,13 +13,6 @@ interface UseRenderCustomMessagesParams {
   position: VueCustomMessageRendererPosition;
 }
 
-interface CustomMessageRendererResult {
-  renderer:
-    | Component<VueCustomMessageRendererProps>
-    | ((props: VueCustomMessageRendererProps) => VNodeChild);
-  props: VueCustomMessageRendererProps;
-}
-
 /**
  * Returns a function that resolves the appropriate custom message renderer for
  * a given message and position.
@@ -37,9 +30,7 @@ export function useRenderCustomMessages() {
   const { copilotkit } = useCopilotKit();
   const config = useCopilotChatConfiguration();
 
-  return function renderCustomMessage(
-    params: UseRenderCustomMessagesParams,
-  ): CustomMessageRendererResult | null {
+  return function renderCustomMessage(params: UseRenderCustomMessagesParams) {
     const configValue = config.value;
     if (!configValue) return null;
 
@@ -47,17 +38,10 @@ export function useRenderCustomMessages() {
     const { threadId } = configValue;
     const core = copilotkit.value;
 
-    const customMessageRenderers = [...core.renderCustomMessages]
-      .filter(
-        (renderer) =>
-          renderer.agentId === undefined || renderer.agentId === agentId,
-      )
-      .sort((a, b) => {
-        const aHasAgent = a.agentId !== undefined;
-        const bHasAgent = b.agentId !== undefined;
-        if (aHasAgent === bHasAgent) return 0;
-        return aHasAgent ? -1 : 1;
-      });
+    const customMessageRenderers = ɵresolveCustomMessageRenderers(
+      core.renderCustomMessages,
+      agentId,
+    );
 
     if (!customMessageRenderers.length) {
       return null;
@@ -101,7 +85,7 @@ export function useRenderCustomMessages() {
       ? core.getStateByRun(agentId, threadId, resolvedRunId)
       : undefined;
 
-    const props: CustomMessageRendererResult["props"] = {
+    const props: VueCustomMessageRendererProps = {
       message,
       position,
       runId,
@@ -112,18 +96,13 @@ export function useRenderCustomMessages() {
       stateSnapshot,
     };
 
-    // Iterate renderers like React: try each one and use the first that
-    // returns a non-null render function.
-    for (const candidate of customMessageRenderers) {
-      if (!candidate.render) {
-        continue;
-      }
-      return {
-        renderer: candidate.render as CustomMessageRendererResult["renderer"],
-        props,
-      };
-    }
+    // Agent-scoped renderers come first. Use the first one that has a
+    // render function.
+    const selected = customMessageRenderers.find(
+      (candidate) => candidate.render,
+    );
+    if (!selected) return null;
 
-    return null;
+    return { renderer: selected.render, props };
   };
 }

package/src/v2/lib/__tests__/shallow-stable.test.ts

@@ -0,0 +1,54 @@
+import { describe, expect, it } from "vitest";
+import { nextTick, shallowRef } from "vue";
+import { useShallowStableRef } from "../shallow-stable";
+
+/** A stable ref over a source the test replaces with `set(next)`. */
+function stableOver<T>(initial: T) {
+  const source = shallowRef(initial);
+  const stable = useShallowStableRef(source);
+  const set = async (next: T) => {
+    source.value = next;
+    await nextTick();
+  };
+  return { stable, set };
+}
+
+describe("useShallowStableRef", () => {
+  it("keeps the reference for a shallowly equal plain object", async () => {
+    const { stable, set } = stableOver({ a: 1 });
+    const first = stable.value;
+
+    await set({ a: 1 });
+
+    expect(stable.value).toBe(first);
+  });
+
+  it("updates the reference when a value changes", async () => {
+    const { stable, set } = stableOver({ a: 1 });
+
+    await set({ a: 2 });
+
+    expect(stable.value).toEqual({ a: 2 });
+  });
+
+  it("updates the reference when a different key holds undefined", async () => {
+    const { stable, set } = stableOver<{ a?: number; b?: number }>({
+      a: undefined,
+    });
+    const first = stable.value;
+
+    await set({ b: undefined });
+
+    expect(stable.value).not.toBe(first);
+    expect(stable.value).toEqual({ b: undefined });
+  });
+
+  it("compares arrays by reference", async () => {
+    const { stable, set } = stableOver([1, 2]);
+    const first = stable.value;
+
+    await set([1, 2]);
+
+    expect(stable.value).not.toBe(first);
+  });
+});

package/src/v2/lib/is-mobile-viewport.ts

@@ -1,23 +1,5 @@
-/**
- * Media query for the mobile breakpoint, shared so the string literal isn't
- * duplicated across call sites within this package (e.g. `CopilotModalHeader`,
- * which needs a live `matchMedia` change-listener and so can't call
- * `isMobileViewport()` directly).
- */
-export const MOBILE_MAX_WIDTH_QUERY = "(max-width: 767px)";
-
-/**
- * Reports whether the viewport is in the mobile range (`<768px`), where the
- * drawer and chat modal are mutually exclusive. SSR-safe (returns `false`
- * when `window` is absent) and guards environments where `window` exists but
- * `window.matchMedia` does not (some test runners, embedded webviews).
- */
-export function isMobileViewport(): boolean {
-  if (
-    typeof window === "undefined" ||
-    typeof window.matchMedia !== "function"
-  ) {
-    return false;
-  }
-  return window.matchMedia(MOBILE_MAX_WIDTH_QUERY).matches;
-}
+// The mobile breakpoint lives in core. This module keeps the import path stable.
+export {
+  ɵMOBILE_MAX_WIDTH_QUERY as MOBILE_MAX_WIDTH_QUERY,
+  ɵisMobileViewport as isMobileViewport,
+} from "@copilotkit/core";

package/src/v2/lib/processPartialHtml.ts

@@ -1,21 +1,6 @@
-export function extractCompleteStyles(html: string): string {
-  const matches = html.match(/<style\b[^>]*>[\s\S]*?<\/style>/gi);
-  return matches ? matches.join("") : "";
-}
-
-export function processPartialHtml(html: string): string {
-  let result = html;
-
-  result = result.replace(/<[^>]*$/, "");
-  result = result.replace(/<(style|script|head)\b[^>]*>[\s\S]*?<\/\1>/gi, "");
-  result = result.replace(/<(style|script|head)\b[^>]*>[\s\S]*$/gi, "");
-  result = result.replace(/&[a-zA-Z0-9#]*$/, "");
-
-  const bodyMatch = result.match(/<body[^>]*>([\s\S]*)/i);
-  if (bodyMatch) {
-    result = bodyMatch[1]!;
-    result = result.replace(/<\/body>[\s\S]*/i, "");
-  }
-
-  return result;
-}
+// The partial-HTML helpers live in @copilotkit/core; these names stay for
+// existing imports.
+export {
+  ɵextractCompleteStyles as extractCompleteStyles,
+  ɵprocessPartialHtml as processPartialHtml,
+} from "@copilotkit/core";

package/src/v2/lib/shallow-stable.ts

@@ -1,21 +1,7 @@
+import { ɵshallowEqualRecord } from "@copilotkit/core";
 import { shallowRef, toValue, watch } from "vue";
 import type { MaybeRefOrGetter, ShallowRef } from "vue";
 
-function shallowEqualObjects(
-  first: Record<string, unknown>,
-  second: Record<string, unknown>,
-): boolean {
-  const firstKeys = Object.keys(first);
-  const secondKeys = Object.keys(second);
-  if (firstKeys.length !== secondKeys.length) return false;
-
-  for (const key of firstKeys) {
-    if (first[key] !== second[key]) return false;
-  }
-
-  return true;
-}
-
 function isPlainObject(value: unknown): value is Record<string, unknown> {
   return (
     value !== null &&
@@ -40,7 +26,7 @@ export function useShallowStableRef<T>(
       if (previous === next) return;
 
       if (isPlainObject(previous) && isPlainObject(next)) {
-        if (shallowEqualObjects(previous, next)) {
+        if (ɵshallowEqualRecord(previous, next)) {
           return;
         }
       }

package/src/v2/lib/vue-core.ts

@@ -44,7 +44,9 @@ export class CopilotKitCoreVue extends CopilotKitCore {
   private _interruptState: InterruptRenderProps<unknown, unknown> | null = null;
 
   constructor(config: CopilotKitCoreVueConfig) {
-    super(config);
+    // Tool handlers can change reactive state. `nextTick` lets Vue flush those
+    // updates before core starts the follow-up run.
+    super({ ...config, ɵwaitForFrameworkUpdates: () => nextTick() });
     this._renderToolCalls = config.renderToolCalls ?? [];
     this._renderCustomMessages = config.renderCustomMessages ?? [];
     this._renderActivityMessages = config.renderActivityMessages ?? [];
@@ -70,7 +72,7 @@ export class CopilotKitCoreVue extends CopilotKitCore {
     this._renderCustomMessages = [...renderers];
     void this.notifySubscribers((subscriber) => {
       const vueSubscriber = subscriber as CopilotKitCoreVueSubscriber;
-      vueSubscriber.onRenderCustomMessagesChanged?.({
+      return vueSubscriber.onRenderCustomMessagesChanged?.({
         copilotkit: this,
         renderCustomMessages: [...this.renderCustomMessages],
       });
@@ -127,12 +129,10 @@ export class CopilotKitCoreVue extends CopilotKitCore {
   private _notifyRenderToolCallsChanged(): void {
     void this.notifySubscribers((subscriber) => {
       const vueSubscriber = subscriber as CopilotKitCoreVueSubscriber;
-      if (vueSubscriber.onRenderToolCallsChanged) {
-        vueSubscriber.onRenderToolCallsChanged({
-          copilotkit: this,
-          renderToolCalls: [...this.renderToolCalls],
-        });
-      }
+      return vueSubscriber.onRenderToolCallsChanged?.({
+        copilotkit: this,
+        renderToolCalls: [...this.renderToolCalls],
+      });
     }, "Subscriber onRenderToolCallsChanged error:");
   }
 
@@ -142,7 +142,7 @@ export class CopilotKitCoreVue extends CopilotKitCore {
     this._interruptState = interruptState;
     void this.notifySubscribers((subscriber) => {
       const vueSubscriber = subscriber as CopilotKitCoreVueSubscriber;
-      vueSubscriber.onInterruptStateChanged?.({
+      return vueSubscriber.onInterruptStateChanged?.({
         copilotkit: this,
         interruptState: this._interruptState,
       });
@@ -154,8 +154,4 @@ export class CopilotKitCoreVue extends CopilotKitCore {
   ): CopilotKitCoreSubscription {
     return super.subscribe(subscriber);
   }
-
-  async waitForPendingFrameworkUpdates(): Promise<void> {
-    await nextTick();
-  }
 }

package/src/v2/providers/CopilotKitProvider.types.ts

@@ -84,11 +84,6 @@ export interface CopilotKitProviderProps {
     sandboxFunctions?: SandboxFunction[];
     designSkill?: string;
   };
-  /**
-   * @deprecated This prop no longer controls the Inspector. Use
-   * `enableInspector` instead.
-   */
-  showDevConsole?: boolean | "auto";
   /**
    * Disable the CopilotKit Inspector in development.
    * The Inspector is enabled by default in development browser builds and is