@copilotkit/vue 2.0.0-rc.3 → 2.0.0-rc.31

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

@@ -5,15 +5,16 @@ import type {
   VueCustomMessageRenderer,
 } from "../types";
 import type { InterruptRenderProps } from "../types/interrupt";
-import { CopilotKitCore } from "@copilotkit/core";
+import { CopilotKitCore, ɵRendererRegistry } from "@copilotkit/core";
 import type {
   CopilotKitCoreConfig,
   CopilotKitCoreSubscriber,
   CopilotKitCoreSubscription,
+  ɵRendererKind,
 } from "@copilotkit/core";
 
 export interface CopilotKitCoreVueConfig extends CopilotKitCoreConfig {
-  renderToolCalls?: VueToolCallRenderer<unknown>[];
+  renderToolCalls?: VueToolCallRenderer[];
   renderActivityMessages?: VueActivityMessageRenderer<unknown>[];
   renderCustomMessages?: VueCustomMessageRenderer[];
 }
@@ -21,132 +22,140 @@ export interface CopilotKitCoreVueConfig extends CopilotKitCoreConfig {
 export interface CopilotKitCoreVueSubscriber extends CopilotKitCoreSubscriber {
   onRenderToolCallsChanged?: (event: {
     copilotkit: CopilotKitCoreVue;
-    renderToolCalls: VueToolCallRenderer<unknown>[];
+    renderToolCalls: VueToolCallRenderer[];
   }) => void | Promise<void>;
   onRenderCustomMessagesChanged?: (event: {
     copilotkit: CopilotKitCoreVue;
     renderCustomMessages: VueCustomMessageRenderer[];
   }) => void | Promise<void>;
+  onRenderActivityMessagesChanged?: (event: {
+    copilotkit: CopilotKitCoreVue;
+    renderActivityMessages: VueActivityMessageRenderer<unknown>[];
+  }) => void | Promise<void>;
   onInterruptStateChanged?: (event: {
     copilotkit: CopilotKitCoreVue;
-    interruptState: InterruptRenderProps<unknown, unknown> | null;
+    interruptState: InterruptRenderProps<unknown> | null;
   }) => void | Promise<void>;
 }
 
 export class CopilotKitCoreVue extends CopilotKitCore {
-  private _renderToolCalls: VueToolCallRenderer<unknown>[] = [];
-  private _hookRenderToolCalls: Map<string, VueToolCallRenderer<unknown>> =
-    new Map();
-  private _cachedMergedRenderToolCalls: VueToolCallRenderer<unknown>[] | null =
-    null;
-  private _renderCustomMessages: VueCustomMessageRenderer[] = [];
-  private _renderActivityMessages: VueActivityMessageRenderer<unknown>[] = [];
-  private _interruptState: InterruptRenderProps<unknown, unknown> | null = null;
+  private readonly _renderers: ɵRendererRegistry<
+    VueToolCallRenderer,
+    VueActivityMessageRenderer<unknown>,
+    VueCustomMessageRenderer
+  >;
 
   constructor(config: CopilotKitCoreVueConfig) {
-    super(config);
-    this._renderToolCalls = config.renderToolCalls ?? [];
-    this._renderCustomMessages = config.renderCustomMessages ?? [];
-    this._renderActivityMessages = config.renderActivityMessages ?? [];
+    // Tool handlers can change reactive state. `nextTick` lets Vue flush those
+    // updates before core starts the follow-up run.
+    super({ ...config, ɵwaitForFrameworkUpdates: () => nextTick() });
+    this._renderers = new ɵRendererRegistry({
+      toolCalls: config.renderToolCalls,
+      activity: config.renderActivityMessages,
+      custom: config.renderCustomMessages,
+    });
+    this._renderers.subscribe((kind) => this.notifyRenderersChanged(kind));
+    // The props live in core's generic interrupt slot; keep the Vue
+    // subscriber event for existing listeners.
+    this.ɵsubscribeToInterruptPayload(() => {
+      void this.notifySubscribers((subscriber) => {
+        const vueSubscriber = subscriber as CopilotKitCoreVueSubscriber;
+        return vueSubscriber.onInterruptStateChanged?.({
+          copilotkit: this,
+          interruptState: this.interruptState,
+        });
+      }, "Subscriber onInterruptStateChanged error:");
+    });
   }
 
-  get renderCustomMessages(): Readonly<VueCustomMessageRenderer[]> {
-    return this._renderCustomMessages;
+  get renderCustomMessages() {
+    return this._renderers.custom;
   }
 
-  get renderActivityMessages(): Readonly<
-    VueActivityMessageRenderer<unknown>[]
-  > {
-    return this._renderActivityMessages;
+  get renderActivityMessages() {
+    return this._renderers.activity;
   }
 
   setRenderActivityMessages(
     renderers: VueActivityMessageRenderer<unknown>[],
   ): void {
-    this._renderActivityMessages = [...renderers];
+    this._renderers.setActivity(renderers);
   }
 
   setRenderCustomMessages(renderers: VueCustomMessageRenderer[]): void {
-    this._renderCustomMessages = [...renderers];
-    void this.notifySubscribers((subscriber) => {
-      const vueSubscriber = subscriber as CopilotKitCoreVueSubscriber;
-      vueSubscriber.onRenderCustomMessagesChanged?.({
-        copilotkit: this,
-        renderCustomMessages: [...this.renderCustomMessages],
-      });
-    }, "Subscriber onRenderCustomMessagesChanged error:");
+    this._renderers.setCustom(renderers);
   }
 
-  get propRenderToolCalls(): Readonly<VueToolCallRenderer<unknown>[]> {
-    return this._renderToolCalls;
+  /**
+   * 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;
   }
 
-  get renderToolCalls(): Readonly<VueToolCallRenderer<unknown>[]> {
-    if (this._hookRenderToolCalls.size === 0) {
-      return this._renderToolCalls;
-    }
-    if (this._cachedMergedRenderToolCalls) {
-      return this._cachedMergedRenderToolCalls;
-    }
-    const merged = new Map<string, VueToolCallRenderer<unknown>>();
-    for (const rc of this._renderToolCalls) {
-      merged.set(`${rc.agentId ?? ""}:${rc.name}`, rc);
-    }
-    for (const [key, rc] of this._hookRenderToolCalls) {
-      merged.set(key, rc);
-    }
-    this._cachedMergedRenderToolCalls = Array.from(merged.values());
-    return this._cachedMergedRenderToolCalls;
+  /**
+   * 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;
   }
 
-  get interruptState(): InterruptRenderProps<unknown, unknown> | null {
-    return this._interruptState;
+  get interruptState(): InterruptRenderProps<unknown> | null {
+    return this.ɵinterruptPayload as InterruptRenderProps<unknown> | null;
   }
 
-  setRenderToolCalls(renderToolCalls: VueToolCallRenderer<unknown>[]): void {
-    this._renderToolCalls = [...renderToolCalls];
-    this._cachedMergedRenderToolCalls = null;
-    this._notifyRenderToolCallsChanged();
+  setRenderToolCalls(renderToolCalls: VueToolCallRenderer[]): void {
+    this._renderers.setPropToolCalls(renderToolCalls);
   }
 
-  addHookRenderToolCall(entry: VueToolCallRenderer<unknown>): void {
-    const key = `${entry.agentId ?? ""}:${entry.name}`;
-    this._hookRenderToolCalls.set(key, entry);
-    this._cachedMergedRenderToolCalls = null;
-    this._notifyRenderToolCallsChanged();
+  addHookRenderToolCall(entry: VueToolCallRenderer): void {
+    this._renderers.addHookToolCall(entry);
   }
 
   removeHookRenderToolCall(name: string, agentId?: string): void {
-    const key = `${agentId ?? ""}:${name}`;
-    if (this._hookRenderToolCalls.delete(key)) {
-      this._cachedMergedRenderToolCalls = null;
-      this._notifyRenderToolCallsChanged();
-    }
+    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 _notifyRenderToolCallsChanged(): void {
+  private notifyRenderersChanged(kind: ɵRendererKind): void {
     void this.notifySubscribers((subscriber) => {
       const vueSubscriber = subscriber as CopilotKitCoreVueSubscriber;
-      if (vueSubscriber.onRenderToolCallsChanged) {
-        vueSubscriber.onRenderToolCallsChanged({
-          copilotkit: this,
-          renderToolCalls: [...this.renderToolCalls],
-        });
+      switch (kind) {
+        case "toolCalls":
+          return vueSubscriber.onRenderToolCallsChanged?.({
+            copilotkit: this,
+            renderToolCalls: [...this.renderToolCalls],
+          });
+        case "activity":
+          return vueSubscriber.onRenderActivityMessagesChanged?.({
+            copilotkit: this,
+            renderActivityMessages: [...this.renderActivityMessages],
+          });
+        case "custom":
+          return vueSubscriber.onRenderCustomMessagesChanged?.({
+            copilotkit: this,
+            renderCustomMessages: [...this.renderCustomMessages],
+          });
       }
-    }, "Subscriber onRenderToolCallsChanged error:");
+    }, `Subscriber renderer change (${kind}) error:`);
   }
 
   setInterruptState(
-    interruptState: InterruptRenderProps<unknown, unknown> | null,
+    interruptState: InterruptRenderProps<unknown> | null,
   ): void {
-    this._interruptState = interruptState;
-    void this.notifySubscribers((subscriber) => {
-      const vueSubscriber = subscriber as CopilotKitCoreVueSubscriber;
-      vueSubscriber.onInterruptStateChanged?.({
-        copilotkit: this,
-        interruptState: this._interruptState,
-      });
-    }, "Subscriber onInterruptStateChanged error:");
+    this.ɵsetInterruptPayload(interruptState);
   }
 
   subscribe(
@@ -154,8 +163,4 @@ export class CopilotKitCoreVue extends CopilotKitCore {
   ): CopilotKitCoreSubscription {
     return super.subscribe(subscriber);
   }
-
-  async waitForPendingFrameworkUpdates(): Promise<void> {
-    await nextTick();
-  }
 }

package/src/v2/providers/CopilotChatConfigurationProvider.vue

@@ -1,18 +1,22 @@
 <script setup lang="ts">
-import { computed, inject, onMounted, provide, ref, watch } from "vue";
+import {
+  computed,
+  inject,
+  onBeforeUnmount,
+  onMounted,
+  provide,
+  shallowRef,
+  watch,
+} from "vue";
+import { ɵChatConfigurationStore } from "@copilotkit/core";
 import type { ComputedRef } from "vue";
-import { DEFAULT_AGENT_ID, randomUUID } from "@copilotkit/shared";
-import type { OpenThreadRegistration } from "@copilotkit/core";
 import { CopilotChatConfigurationKey, CopilotKitKey } from "./keys";
+import { ChatConfigurationStoreKey } from "./chat-configuration-store-key";
 import { CopilotChatDefaultLabels } from "./types";
 import type { CopilotChatConfigurationValue, CopilotChatLabels } from "./types";
 import type { CopilotChatConfigurationProviderProps } from "./CopilotChatConfigurationProvider.types";
 import { useShallowStableRef } from "../lib/shallow-stable";
-import { isMobileViewport } from "../lib/is-mobile-viewport";
 
-// Vue normalizes optional Boolean props to `false` when not supplied; declare
-// `undefined` defaults so we can faithfully distinguish "caller passed false"
-// from "caller did not pass the prop", matching React's prop semantics.
 const props = withDefaults(
   defineProps<CopilotChatConfigurationProviderProps>(),
   {
@@ -25,210 +29,68 @@ const parentConfig = inject<ComputedRef<CopilotChatConfigurationValue> | null>(
   CopilotChatConfigurationKey,
   null,
 );
-const parentConfigValue = computed(() => parentConfig?.value ?? null);
 
-// Caller-authoritative when a threadId prop is supplied AND not explicitly
-// flagged non-explicit. A <CopilotKit>-seeded non-explicit id
-// (threadId + hasExplicitThreadId=false) stays overridable — the round-2 fix.
-const propIsAuthoritative = computed(
-  () => props.threadId !== undefined && props.hasExplicitThreadId !== false,
+// Core owns thread, agent, modal and drawer resolution across the provider
+// chain; this component feeds it props and projects its snapshot.
+const readOptions = () => ({
+  agentId: props.agentId,
+  threadId: props.threadId,
+  hasExplicitThreadId: props.hasExplicitThreadId,
+  isModalDefaultOpen: props.isModalDefaultOpen,
+});
+const store = new ɵChatConfigurationStore(
+  readOptions(),
+  inject(ChatConfigurationStoreKey, null),
 );
-
-// Imperative active-thread override (a picked row or a fresh startNewThread).
-const activeThreadOverride = ref<{
-  threadId: string;
-  explicit: boolean;
-} | null>(null);
+const snapshot = shallowRef(store.getSnapshot());
+const unsubscribe = store.subscribe(() => {
+  snapshot.value = store.getSnapshot();
+});
+watch(readOptions, (options) => store.update(options));
+onBeforeUnmount(() => {
+  unsubscribe();
+  store.dispose();
+});
 
 const stableLabels = useShallowStableRef(computed(() => props.labels));
 
 const mergedLabels = computed<CopilotChatLabels>(() => ({
   ...CopilotChatDefaultLabels,
-  ...parentConfigValue.value?.labels,
+  ...parentConfig?.value?.labels,
   ...stableLabels.value,
 }));
 
-const resolvedAgentId = computed(
-  () => props.agentId ?? parentConfigValue.value?.agentId ?? DEFAULT_AGENT_ID,
-);
-
-const fallbackThreadId = randomUUID();
-const resolvedThreadId = computed(() => {
-  if (propIsAuthoritative.value) return props.threadId as string;
-  if (activeThreadOverride.value) return activeThreadOverride.value.threadId;
-  if (props.threadId) return props.threadId;
-  if (parentConfigValue.value?.threadId)
-    return parentConfigValue.value.threadId;
-  return fallbackThreadId;
-});
-
 // Tell Core which Thread this view shows, so captured interactions can link
-// to it. This provider also works without a CopilotKitProvider, and then there
-// is nothing to register with. Registration starts on mount, so a server
-// render never registers a Thread that it can't unregister.
+// to it. Works without a CopilotKitProvider: then there is nothing to register.
 const copilotKitContext = inject(CopilotKitKey, null);
-let openThread: OpenThreadRegistration | null = null;
 onMounted(() => {
   watch(
-    () => [copilotKitContext?.copilotkit.value, resolvedAgentId.value] as const,
-    ([core, agentId], _previous, onCleanup) => {
+    () => copilotKitContext?.copilotkit.value,
+    (core, _previous, onCleanup) => {
       if (!core) return;
-      const registration = core.registerOpenThread({
-        agentId,
-        threadId: resolvedThreadId.value,
-      });
-      openThread = registration;
-      onCleanup(() => {
-        registration.unregister();
-        openThread = null;
-      });
+      onCleanup(store.bindOpenThread(core));
     },
     { immediate: true },
   );
-  watch(resolvedThreadId, (threadId) => openThread?.update(threadId));
-});
-
-const resolvedHasExplicitThreadId = computed(() => {
-  if (propIsAuthoritative.value) return true;
-  const own = activeThreadOverride.value
-    ? activeThreadOverride.value.explicit
-    : props.hasExplicitThreadId !== undefined
-      ? props.hasExplicitThreadId
-      : !!props.threadId;
-  return own || !!parentConfigValue.value?.hasExplicitThreadId;
-});
-
-const shouldCreateModalState = computed(
-  () => props.isModalDefaultOpen !== undefined,
-);
-const resolvedDefaultOpen = computed(() => props.isModalDefaultOpen ?? true);
-
-const internalModalOpen = ref<boolean>(
-  parentConfigValue.value?.isModalOpen ?? resolvedDefaultOpen.value,
-);
-
-function setInternalModalOpen(open: boolean) {
-  internalModalOpen.value = open;
-}
-
-const resolvedIsModalOpen = computed(() =>
-  shouldCreateModalState.value
-    ? internalModalOpen.value
-    : parentConfigValue.value?.isModalOpen,
-);
-const resolvedSetModalOpen = computed(() =>
-  shouldCreateModalState.value
-    ? setInternalModalOpen
-    : parentConfigValue.value?.setModalOpen,
-);
-
-function setActiveThreadId(threadId: string, options?: { explicit?: boolean }) {
-  if (propIsAuthoritative.value) {
-    console.warn(
-      "[CopilotKit] Ignoring setActiveThreadId(): threadId is controlled " +
-        "via the `threadId` prop on CopilotChatConfigurationProvider.",
-    );
-    return;
-  }
-  activeThreadOverride.value = {
-    threadId,
-    explicit: options?.explicit ?? true,
-  };
-}
-
-function startNewThread() {
-  if (propIsAuthoritative.value) {
-    console.warn(
-      "[CopilotKit] Ignoring startNewThread(): threadId is controlled via " +
-        "the `threadId` prop on CopilotChatConfigurationProvider.",
-    );
-    return;
-  }
-  activeThreadOverride.value = { threadId: randomUUID(), explicit: false };
-}
-
-// Drawer presence + open state. The top-most provider owns the state; a nested
-// provider proxies its parent so the whole chain shares one drawer.
-const ownDrawerOpen = ref(false);
-const ownDrawerCount = ref(0);
-
-function ownSetDrawerOpen(open: boolean) {
-  ownDrawerOpen.value = open;
-  // Mobile mutual-exclusion: opening the drawer closes the chat modal.
-  if (open && isMobileViewport()) {
-    resolvedSetModalOpen.value?.(false);
-  }
-}
-
-function ownRegisterDrawer(): () => void {
-  ownDrawerCount.value += 1;
-  return () => {
-    ownDrawerCount.value = Math.max(0, ownDrawerCount.value - 1);
-  };
-}
-
-const resolvedDrawerOpen = computed(() =>
-  parentConfigValue.value
-    ? parentConfigValue.value.drawerOpen
-    : ownDrawerOpen.value,
-);
-const resolvedSetDrawerOpen = computed(() =>
-  parentConfigValue.value
-    ? parentConfigValue.value.setDrawerOpen
-    : ownSetDrawerOpen,
-);
-const resolvedDrawerRegistered = computed(() =>
-  parentConfigValue.value
-    ? parentConfigValue.value.drawerRegistered
-    : ownDrawerCount.value > 0,
-);
-const resolvedRegisterDrawer = computed(() =>
-  parentConfigValue.value
-    ? parentConfigValue.value.registerDrawer
-    : ownRegisterDrawer,
-);
-
-// Public modal setter (mobile mutual-exclusion, other direction: opening the
-// chat modal closes the drawer). Preserve the contract that it is `undefined`
-// when this provider owns no modal state AND no parent provides one —
-// CopilotChatToggleButton relies on that absence to fall back to its own
-// local open-state. When a real modal setter exists (own `isModalDefaultOpen`
-// state or an inherited parent setter), wrap it so opening the modal on
-// mobile also closes the drawer.
-//
-// Note: this diverges from the React reference (CopilotChatConfigurationProvider.tsx),
-// which keeps `setModalOpen` always-defined and always backed by internal state. We
-// intentionally take the minimal Vue-local fix here — preserving the `undefined`
-// contract CopilotChatToggleButton depends on — rather than also reworking
-// `resolvedIsModalOpen`'s backing, to avoid changing bare-provider modal-open
-// semantics.
-const publicSetModalOpen = computed(() => {
-  const base = resolvedSetModalOpen.value; // undefined when no modal state + no parent
-  if (!base) return undefined;
-  return (open: boolean) => {
-    if (open && isMobileViewport()) {
-      resolvedSetDrawerOpen.value?.(false);
-    }
-    base(open);
-  };
 });
 
 const configurationValue = computed<CopilotChatConfigurationValue>(() => ({
   labels: mergedLabels.value,
-  agentId: resolvedAgentId.value,
-  threadId: resolvedThreadId.value,
-  hasExplicitThreadId: resolvedHasExplicitThreadId.value,
-  isModalOpen: resolvedIsModalOpen.value,
-  setModalOpen: publicSetModalOpen.value,
-  drawerOpen: resolvedDrawerOpen.value,
-  setDrawerOpen: resolvedSetDrawerOpen.value,
-  drawerRegistered: resolvedDrawerRegistered.value,
-  registerDrawer: resolvedRegisterDrawer.value,
-  setActiveThreadId,
-  startNewThread,
+  agentId: snapshot.value.agentId,
+  threadId: snapshot.value.threadId,
+  hasExplicitThreadId: snapshot.value.hasExplicitThreadId,
+  isModalOpen: snapshot.value.isModalOpen,
+  setModalOpen: store.setModalOpen,
+  drawerOpen: snapshot.value.drawerOpen,
+  setDrawerOpen: store.setDrawerOpen,
+  drawerRegistered: snapshot.value.drawerRegistered,
+  registerDrawer: store.registerDrawer,
+  setActiveThreadId: store.setActiveThreadId,
+  startNewThread: store.startNewThread,
 }));
 
 provide(CopilotChatConfigurationKey, configurationValue);
+provide(ChatConfigurationStoreKey, store);
 </script>
 
 <template>