@copilotkit/vue 2.0.0-rc.26 → 2.0.0-rc.28

package/src/v2/components/chat/CopilotSidebarViewInternal.vue

@@ -1,14 +1,19 @@
 <script setup lang="ts">
 import {
   computed,
-  nextTick,
   onBeforeUnmount,
   onMounted,
   ref,
   useAttrs,
   watch,
 } from "vue";
-import { ɵcreateDockedSidebar, ɵdimensionToCss } from "@copilotkit/core";
+import {
+  ɵSIDEBAR_DEFAULT_WIDTH,
+  ɵSIDEBAR_TRANSITION_MS,
+  ɵcreateDockedSidebar,
+  ɵdimensionToCss,
+  ɵwatchElementWidth,
+} from "@copilotkit/core";
 import type { ɵDockedSidebar } from "@copilotkit/core";
 import { CopilotChatDefaultLabels } from "../../providers/types";
 import { useCopilotChatConfiguration } from "../../providers/useCopilotChatConfiguration";
@@ -32,9 +37,6 @@ import type {
 
 defineOptions({ inheritAttrs: false });
 
-const DEFAULT_SIDEBAR_WIDTH = 480;
-const SIDEBAR_TRANSITION_MS = 260;
-
 const props = withDefaults(
   defineProps<Omit<CopilotSidebarViewProps, "defaultOpen">>(),
   {
@@ -98,9 +100,8 @@ const config = useCopilotChatConfiguration();
 
 const sidebarRef = ref<HTMLElement | null>(null);
 const measuredSidebarWidth = ref<number | string>(
-  props.width ?? DEFAULT_SIDEBAR_WIDTH,
+  props.width ?? ɵSIDEBAR_DEFAULT_WIDTH,
 );
-let resizeObserver: ResizeObserver | null = null;
 
 const isSidebarOpen = computed(() => config.value?.isModalOpen ?? false);
 const resolvedSidebarWidth = computed(
@@ -130,7 +131,7 @@ const asideStyle = computed(
     }) as Record<string, string>,
 );
 const widthCss = computed(() =>
-  ɵdimensionToCss(resolvedSidebarWidth.value, DEFAULT_SIDEBAR_WIDTH),
+  ɵdimensionToCss(resolvedSidebarWidth.value, ɵSIDEBAR_DEFAULT_WIDTH),
 );
 
 // The page makes room on the docked edge (desktop only).
@@ -142,17 +143,6 @@ watch(
   },
 );
 
-function updateMeasuredWidth() {
-  if (props.width !== undefined || !sidebarRef.value) {
-    return;
-  }
-
-  const nextWidth = sidebarRef.value.getBoundingClientRect().width;
-  if (nextWidth > 0) {
-    measuredSidebarWidth.value = nextWidth;
-  }
-}
-
 function closeSidebar() {
   config.value?.setModalOpen?.(false);
 }
@@ -226,48 +216,35 @@ const chatViewEventProps = computed(() => {
   return listeners;
 });
 
+// Without a `width` prop, the page margin follows the width the CSS gives
+// the sidebar.
 watch(
-  () => props.width,
-  (nextWidth) => {
-    if (nextWidth !== undefined) {
-      measuredSidebarWidth.value = nextWidth;
-      return;
-    }
-    updateMeasuredWidth();
+  [sidebarRef, () => props.width],
+  ([element, width], _old, onCleanup) => {
+    if (width !== undefined || !element) return;
+    onCleanup(
+      ɵwatchElementWidth(element, (next) => {
+        measuredSidebarWidth.value = next;
+      }),
+    );
   },
+  { flush: "post" },
 );
 
-onMounted(async () => {
+onMounted(() => {
   dock = ɵcreateDockedSidebar(document, {
-    transitionMs: SIDEBAR_TRANSITION_MS,
+    transitionMs: ɵSIDEBAR_TRANSITION_MS,
   });
   dock.set({
     open: isSidebarOpen.value,
     position: props.position,
     width: widthCss.value,
   });
-  await nextTick();
-  updateMeasuredWidth();
-
-  if (
-    props.width !== undefined ||
-    !sidebarRef.value ||
-    typeof ResizeObserver === "undefined"
-  ) {
-    return;
-  }
-
-  resizeObserver = new ResizeObserver(() => {
-    updateMeasuredWidth();
-  });
-  resizeObserver.observe(sidebarRef.value);
 });
 
 onBeforeUnmount(() => {
   dock?.dispose();
   dock = undefined;
-  resizeObserver?.disconnect();
-  resizeObserver = null;
 });
 </script>
 

package/src/v2/components/chat/CopilotThreadsDrawer.vue

@@ -21,10 +21,10 @@ import type {
 // lands and is published; declared locally here because the built element types
 // in this worktree predate it.
 type CollapseChangeDetail = { collapsed: boolean };
-import { DEFAULT_AGENT_ID } from "@copilotkit/shared";
 import {
   ɵcreateThreadsDrawerActions,
   ɵgetThreadsDrawerElementProps,
+  ɵresolveAgentId,
   ɵresolveThreadsLicense,
   ɵtoDrawerThread,
 } from "@copilotkit/core";
@@ -82,8 +82,11 @@ const threadsLicense = computed(() => ɵresolveThreadsLicense(license.value));
 const licensed = computed(() => threadsLicense.value.licensed);
 const licensePending = computed(() => threadsLicense.value.licensePending);
 
-const resolvedAgentId = computed(
-  () => props.agentId ?? config.value?.agentId ?? DEFAULT_AGENT_ID,
+const resolvedAgentId = computed(() =>
+  ɵresolveAgentId({
+    agentId: props.agentId,
+    chatAgentId: config.value?.agentId,
+  }),
 );
 const activeThreadId = computed(() => config.value?.threadId ?? null);
 

package/src/v2/components/chat/__tests__/CopilotChatInput.test.ts

@@ -1218,4 +1218,47 @@ describe("CopilotChatInput", () => {
       expect(input.value).toBe("部分");
     });
   });
+
+  // `onSubmitMessage` is both a declared prop (to detect a listener) and the
+  // `submit-message` emit. A template `@submit-message` listener must enable
+  // sending and fire once per send.
+  describe("@submit-message listener", () => {
+    function renderWithTemplateListener(onSubmit?: (value: string) => void) {
+      const Host = defineComponent({
+        components: { CopilotChatConfigurationProvider, CopilotChatInput },
+        setup() {
+          return { TEST_THREAD_ID, onSubmit };
+        },
+        template: onSubmit
+          ? `
+            <CopilotChatConfigurationProvider :thread-id="TEST_THREAD_ID">
+              <CopilotChatInput model-value="hello" @submit-message="onSubmit" />
+            </CopilotChatConfigurationProvider>
+          `
+          : `
+            <CopilotChatConfigurationProvider :thread-id="TEST_THREAD_ID">
+              <CopilotChatInput model-value="hello" />
+            </CopilotChatConfigurationProvider>
+          `,
+      });
+      return render(Host);
+    }
+
+    it("enables the send button and fires the listener once per send", async () => {
+      const onSubmit = vi.fn();
+      renderWithTemplateListener(onSubmit);
+
+      expect(getSendButton().disabled).toBe(false);
+      await fireEvent.click(getSendButton());
+
+      expect(onSubmit).toHaveBeenCalledTimes(1);
+      expect(onSubmit).toHaveBeenCalledWith("hello");
+    });
+
+    it("keeps the send button disabled without a listener", () => {
+      renderWithTemplateListener();
+
+      expect(getSendButton().disabled).toBe(true);
+    });
+  });
 });

package/src/v2/components/chat/__tests__/CopilotChatView.pinToSend.test.ts

@@ -1,6 +1,6 @@
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import { defineComponent, h, provide, ref } from "vue";
-import { render, waitFor } from "@testing-library/vue";
+import { fireEvent, render, waitFor } from "@testing-library/vue";
 import type { Message } from "@ag-ui/core";
 import CopilotKitProvider from "../../../providers/CopilotKitProvider.vue";
 import CopilotChatConfigurationProvider from "../../../providers/CopilotChatConfigurationProvider.vue";
@@ -75,6 +75,10 @@ async function waitForMount(screen: ReturnType<typeof render>) {
   await screen.findByTestId("copilot-chat-view");
 }
 
+function rect(top: number, bottom: number) {
+  return { top, bottom, left: 0, right: 0, width: 0, height: bottom - top };
+}
+
 describe("CopilotChatView pin-to-send mode", () => {
   it("renders the pin-to-send spacer element when autoScroll='pin-to-send'", async () => {
     const screen = renderView("pin-to-send");
@@ -163,4 +167,42 @@ describe("CopilotChatView pin-to-send mode", () => {
       expect(spacer.getAttribute("data-pin-to-send-spacer")).not.toBeNull(),
     );
   });
+  // The spacer under the messages is not content: the scroll-to-bottom
+  // button follows the end of the messages, as in React.
+  describe("scroll-to-bottom button", () => {
+    async function setup(contentBottom: number) {
+      const screen = renderView("pin-to-send");
+      await waitForMount(screen);
+      const scrollElement = screen.getByTestId("copilot-chat-view-scroll");
+      const contentElement = screen.getByTestId("copilot-scroll-content");
+      // The spacer makes the scroll height far larger than the view.
+      Object.defineProperty(scrollElement, "scrollHeight", {
+        configurable: true,
+        get: () => 2000,
+      });
+      Object.defineProperty(scrollElement, "clientHeight", {
+        configurable: true,
+        get: () => 400,
+      });
+      scrollElement.getBoundingClientRect = () => rect(0, 400) as DOMRect;
+      contentElement.getBoundingClientRect = () =>
+        rect(-200, contentBottom) as DOMRect;
+      await fireEvent.scroll(scrollElement);
+      return screen;
+    }
+
+    it("stays hidden when only the spacer is below the view", async () => {
+      const screen = await setup(390);
+      expect(
+        screen.queryByTestId("copilot-chat-view-scroll-to-bottom"),
+      ).toBeNull();
+    });
+
+    it("shows when messages sit below the view", async () => {
+      const screen = await setup(700);
+      expect(
+        await screen.findByTestId("copilot-chat-view-scroll-to-bottom"),
+      ).toBeDefined();
+    });
+  });
 });

package/src/v2/components/chat/message-feedback.ts

@@ -114,6 +114,26 @@ export interface FeedbackComment {
   readonly close: ɵFeedbackCommentController["close"];
   /** Moves focus back to the thumb without opening the comment again. */
   readonly returnFocus: (target: HTMLElement | null) => void;
+  /** The chosen thumb the popover points at. */
+  readonly anchor: ComputedRef<HTMLElement | null>;
+  /** A thumb click; returns whether the app's handler should run. */
+  readonly rate: ɵFeedbackCommentController["rate"];
+  /** The attributes and handlers of one thumb. */
+  readonly thumb: ɵFeedbackCommentController["thumb"];
+  /** Points at the chosen thumb when the click gave no element. */
+  readonly findAnchor: ɵFeedbackCommentController["findAnchor"];
+  /** Closes a comment whose rating changed or whose toolbar hid. */
+  readonly sync: ɵFeedbackCommentController["sync"];
+  /** Moves focus into the field when a keyboard rating asked for it. */
+  readonly focusField: ɵFeedbackCommentController["focusField"];
+  /** Saves, closes, and returns focus to the thumb. */
+  readonly submit: ɵFeedbackCommentController["submit"];
+  /** Escape in the popover; returns whether to stop the event. */
+  readonly popoverEscape: ɵFeedbackCommentController["popoverEscape"];
+  /** Tab out of the popover, back into the page's order. */
+  readonly popoverKeyDown: ɵFeedbackCommentController["popoverKeyDown"];
+  /** Focus left the comment form. */
+  readonly popoverFocusLeave: ɵFeedbackCommentController["popoverFocusLeave"];
 }
 
 /**
@@ -124,8 +144,10 @@ export interface FeedbackComment {
 export function useFeedbackComment(
   controls: Ref<MessageFeedbackControls | null>,
 ): FeedbackComment {
+  const input = shallowRef<HTMLInputElement | null>(null);
   const controller = new ɵFeedbackCommentController({
     getControls: () => controls.value,
+    getInput: () => input.value,
   });
   const state = shallowRef(controller.getSnapshot());
   const unsubscribe = controller.subscribe(() => {
@@ -145,12 +167,22 @@ export function useFeedbackComment(
     }),
     focusRequest: computed(() => state.value.focusRequest),
     takeFocusRequest: controller.takeFocusRequest,
-    input: shallowRef<HTMLInputElement | null>(null),
+    input,
     show: controller.show,
     enter: controller.enter,
     leave: controller.leave,
     setEditing: controller.setEditing,
     close: controller.close,
     returnFocus: controller.returnFocus,
+    anchor: computed(() => state.value.anchor),
+    rate: controller.rate,
+    thumb: controller.thumb,
+    findAnchor: controller.findAnchor,
+    sync: controller.sync,
+    focusField: controller.focusField,
+    submit: controller.submit,
+    popoverEscape: controller.popoverEscape,
+    popoverKeyDown: controller.popoverKeyDown,
+    popoverFocusLeave: controller.popoverFocusLeave,
   };
 }

package/src/v2/hooks/use-configure-suggestions.ts

@@ -2,8 +2,7 @@ import { computed, watch } from "vue";
 import type { WatchSource } from "vue";
 import { useCopilotKit } from "../providers/useCopilotKit";
 import { useCopilotChatConfiguration } from "../providers/useCopilotChatConfiguration";
-import { DEFAULT_AGENT_ID } from "@copilotkit/shared";
-import { ɵbindSuggestionsConfig } from "@copilotkit/core";
+import { ɵbindSuggestionsConfig, ɵresolveAgentId } from "@copilotkit/core";
 import type { ɵSuggestionsConfigInput } from "@copilotkit/core";
 
 /**
@@ -27,8 +26,8 @@ export function useConfigureSuggestions(
 ): void {
   const { copilotkit } = useCopilotKit();
   const chatConfig = useCopilotChatConfiguration();
-  const chatAgentId = computed(
-    () => chatConfig.value?.agentId ?? DEFAULT_AGENT_ID,
+  const chatAgentId = computed(() =>
+    ɵresolveAgentId({ chatAgentId: chatConfig.value?.agentId }),
   );
   const extraDeps = deps ?? [];
 

package/src/v2/hooks/use-default-render-tool.ts

@@ -2,84 +2,23 @@ import { defineComponent, h, inject, ref } from "vue";
 import type { WatchSource } from "vue";
 import type { Component, VNodeChild } from "vue";
 import {
+  ɵadaptDefaultToolCallRenderProps as adaptRendererProps,
   ɵgetToolCallBadge,
   ɵnormalizeToolCallStatus,
   ɵstringifyToolCallAttr,
   ɵstringifyToolCallPayload,
 } from "@copilotkit/core";
-import type { ToolCallStatus } from "@copilotkit/core";
+import type {
+  ɵDefaultToolCallRenderProps,
+  ɵRawToolCallRenderProps,
+} from "@copilotkit/core";
 import { useRenderTool } from "./use-render-tool";
 import { ToolCallGroupContextKey } from "../components/chat/tool-call-display-context";
 import { ToolCallRow } from "../components/chat/tool-call-group-parts";
 import { useChatLabels } from "../components/chat/use-chat-labels";
 
-type DefaultRenderProps = {
-  name: string;
-  toolCallId: string;
-  parameters: unknown;
-  status: "inProgress" | "executing" | "complete";
-  result: string | undefined;
-};
-
-/**
- * Module-level dedup set so an unknown status value only emits a console
- * warning the FIRST time we encounter it. Otherwise a stuck/unmapped status
- * would log on every re-render (potentially many per second).
- */
-const warnedUnknownStatuses = new Set<string>();
-
-/**
- * Map a {@link ToolCallStatus} enum value to the documented string-union
- * status the {@link DefaultRenderProps} contract exposes. Unknown / future
- * enum members log a warning (once per distinct value) and fall back to
- * `"inProgress"`.
- */
-function mapToolCallStatus(
-  status: ToolCallStatus,
-): DefaultRenderProps["status"] {
-  const normalized = ɵnormalizeToolCallStatus(status);
-  if (normalized !== "unknown") return normalized;
-  const key = String(status);
-  if (!warnedUnknownStatuses.has(key)) {
-    warnedUnknownStatuses.add(key);
-    console.warn(
-      `[CopilotKit] Unknown ToolCallStatus "${key}" in default tool-call renderer; falling back to "inProgress".`,
-    );
-  }
-  return "inProgress";
-}
-
-/**
- * Convert framework-internal raw renderer props (`args`, enum status) to the
- * documented DefaultRenderProps shape. Idempotent on already-documented input
- * — if the caller passes `parameters` and a string-union `status`, those win.
- */
-type AdaptInput = {
-  name?: unknown;
-  toolCallId?: unknown;
-  args?: unknown;
-  parameters?: unknown;
-  status?: unknown;
-  result?: unknown;
-};
-
-function adaptRendererProps(raw: AdaptInput): DefaultRenderProps {
-  const parameters = raw.parameters !== undefined ? raw.parameters : raw.args;
-  const rawStatus = raw.status;
-  const status: DefaultRenderProps["status"] =
-    rawStatus === "inProgress" ||
-    rawStatus === "executing" ||
-    rawStatus === "complete"
-      ? rawStatus
-      : mapToolCallStatus(rawStatus as ToolCallStatus);
-  return {
-    name: raw.name as string,
-    toolCallId: raw.toolCallId as string,
-    parameters,
-    status,
-    result: raw.result as string | undefined,
-  };
-}
+type DefaultRenderProps = ɵDefaultToolCallRenderProps;
+type AdaptInput = ɵRawToolCallRenderProps;
 
 const DefaultToolCallRenderer = defineComponent({
   props: {

package/src/v2/hooks/use-frontend-tool.ts

@@ -1,4 +1,5 @@
 import { watch } from "vue";
+import { ɵregisterFrontendTools } from "@copilotkit/core";
 import type { WatchSource } from "vue";
 import { useCopilotKit } from "../providers/useCopilotKit";
 import type { VueFrontendTool } from "../types";
@@ -14,8 +15,8 @@ const EMPTY_DEPS: WatchSource<unknown>[] = [];
  *
  * A tool with the same name and `agentId` as a tool that is already
  * registered (for example a provider `frontendTools` entry) takes its place
- * while this scope is active. When the scope is disposed, the earlier tool is
- * active again.
+ * while this scope is active, with a console warning. When the scope is
+ * disposed, the earlier tool is active again.
  *
  * @example
  * ```ts
@@ -45,26 +46,15 @@ export function useFrontendTool<T extends Record<string, unknown>>(
     ],
     (_newValues, _old, onCleanup) => {
       const core = copilotkit.value;
-      const name = tool.name;
-
       // Registrations stack in core: this one shadows an earlier tool with the
       // same name and agentId (a provider tool, or another component's), and
-      // unregistering it brings that tool back.
-      const unregister = core.addTool(tool);
-
-      // The render function is registered even when tool.parameters is
-      // undefined — tools like HITL confirm dialogs have no parameters
-      // but still need their UI rendered in the chat.
-      if (tool.render) {
-        core.addHookRenderToolCall({
-          name,
-          args: tool.parameters,
-          agentId: tool.agentId,
-          render: tool.render,
-        } as VueToolCallRenderer);
-      }
-
-      onCleanup(unregister);
+      // unregistering it brings that tool back. The renderer stays registered
+      // so past calls still render in the chat history.
+      onCleanup(
+        ɵregisterFrontendTools(core, [tool], (renderer) =>
+          core.addHookRenderToolCall(renderer as VueToolCallRenderer),
+        ),
+      );
     },
     { immediate: true },
   );

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

@@ -5,8 +5,8 @@ import {
   ɵdescribeActivityRendererFailure,
   ɵfindActivityRenderer,
   ɵmatchActivityRenderer,
+  ɵresolveAgentId,
 } from "@copilotkit/core";
-import { DEFAULT_AGENT_ID } from "@copilotkit/shared";
 import { useCopilotKit } from "../providers/useCopilotKit";
 import { useCopilotChatConfiguration } from "../providers/useCopilotChatConfiguration";
 import type { VueActivityMessageRendererProps } from "../types";
@@ -23,7 +23,9 @@ import type { VueActivityMessageRendererProps } from "../types";
 export function useRenderActivityMessage() {
   const { copilotkit } = useCopilotKit();
   const config = useCopilotChatConfiguration();
-  const agentId = computed(() => config.value?.agentId ?? DEFAULT_AGENT_ID);
+  const agentId = computed(() =>
+    ɵresolveAgentId({ chatAgentId: config.value?.agentId }),
+  );
 
   function findRenderer(activityType: string) {
     return ɵfindActivityRenderer(copilotkit.value.renderActivityMessages, {

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

@@ -1,13 +1,15 @@
 import { computed, ref, toValue, watch } from "vue";
 import type { MaybeRefOrGetter, Ref } from "vue";
-import { ɵsubscribeToAgentSuggestions } from "@copilotkit/core";
+import {
+  ɵresolveAgentId,
+  ɵsubscribeToAgentSuggestions,
+} from "@copilotkit/core";
 import type {
   CopilotKitCoreGetSuggestionsResult,
   Suggestion,
 } from "@copilotkit/core";
 import { useCopilotKit } from "../providers/useCopilotKit";
 import { useCopilotChatConfiguration } from "../providers/useCopilotChatConfiguration";
-import { DEFAULT_AGENT_ID } from "@copilotkit/shared";
 
 export interface UseSuggestionsOptions {
   agentId?: MaybeRefOrGetter<string | undefined>;
@@ -38,8 +40,11 @@ export function useSuggestions(
 ): UseSuggestionsResult {
   const { copilotkit } = useCopilotKit();
   const config = useCopilotChatConfiguration();
-  const resolvedAgentId = computed(
-    () => toValue(options.agentId) ?? config.value?.agentId ?? DEFAULT_AGENT_ID,
+  const resolvedAgentId = computed(() =>
+    ɵresolveAgentId({
+      agentId: toValue(options.agentId),
+      chatAgentId: config.value?.agentId,
+    }),
   );
 
   const suggestions = ref<Suggestion[]>([]);

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

@@ -1,23 +1,14 @@
 import { computed, onScopeDispose, shallowRef, toValue, watch } from "vue";
 import type { MaybeRefOrGetter, Ref } from "vue";
 import { ɵThreadsController, ɵcreateThreadStore } from "@copilotkit/core";
+import type { ɵThreadSummary } from "@copilotkit/core";
 import { useCopilotKit } from "../providers/useCopilotKit";
 
-export interface Thread {
-  id: string;
-  agentId: string;
-  name: string | null;
-  archived: boolean;
-  createdAt: string;
-  updatedAt: string;
-  /**
-   * ISO-8601 timestamp of the most recent agent run on this thread. Absent
-   * when the thread has never been run. Prefer this over `updatedAt` for
-   * user-facing "last activity" displays — it is not bumped by metadata-only
-   * actions like rename or archive.
-   */
-  lastRunAt?: string;
-}
+/**
+ * One thread as the hook returns it. This is core's thread summary, the same
+ * type React and Angular expose, so the adapters cannot drift apart.
+ */
+export type Thread = ɵThreadSummary;
 
 export interface UseThreadsInput {
   agentId: MaybeRefOrGetter<string>;

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

@@ -86,12 +86,18 @@ export class CopilotKitCoreVue extends CopilotKitCore {
     this._renderers.setCustom(renderers);
   }
 
-  /** The renderers the provider was given, without hook renderers. */
+  /**
+   * The renderers the provider was given, without hook or built-in
+   * renderers. Nothing in CopilotKit reads it now; it stays for app code.
+   */
   get propRenderToolCalls() {
     return this._renderers.propToolCalls;
   }
 
-  /** Prop and hook renderers merged; a hook renderer wins over a prop one. */
+  /**
+   * Prop, hook and built-in renderers merged. For one name and agentId, a
+   * hook renderer wins over a prop one, and both win over a built-in one.
+   */
   get renderToolCalls() {
     return this._renderers.toolCalls;
   }
@@ -112,6 +118,17 @@ export class CopilotKitCoreVue extends CopilotKitCore {
     this._renderers.removeHookToolCall(name, agentId);
   }
 
+  /**
+   * @internal Add a renderer for a tool a built-in feature owns (A2UI,
+   * generative UI). Prop and hook renderers with the same name and agent win
+   * over it, and `setRenderToolCalls` never removes it.
+   *
+   * @returns A function that removes the renderer.
+   */
+  ɵaddBuiltInRenderToolCall(entry: VueToolCallRenderer): () => void {
+    return this._renderers.addBuiltInToolCall(entry);
+  }
+
   private notifyRenderersChanged(kind: ɵRendererKind): void {
     void this.notifySubscribers((subscriber) => {
       const vueSubscriber = subscriber as CopilotKitCoreVueSubscriber;