@copilotkit/vue 1.75.1 → 1.76.0

package/src/v2/__tests__/utils/test-helpers.ts

@@ -7,6 +7,8 @@ import type {
   RunAgentInput,
   RunAgentParameters,
   RunAgentResult,
+  RunStartedEvent,
+  RunFinishedEvent,
 } from "@ag-ui/client";
 import { Observable, Subject, from, delay } from "rxjs";
 import { defineComponent, nextTick } from "vue";
@@ -485,12 +487,30 @@ export function renderWithCopilotKit({
   return render(Host);
 }
 
-export function runStartedEvent(): BaseEvent {
-  return { type: EventType.RUN_STARTED } as BaseEvent;
+export function runStartedEvent(
+  input: Pick<RunAgentInput, "threadId" | "runId"> = {
+    threadId: "test-thread",
+    runId: "test-run",
+  },
+): RunStartedEvent {
+  return {
+    type: EventType.RUN_STARTED,
+    threadId: input.threadId,
+    runId: input.runId,
+  };
 }
 
-export function runFinishedEvent(): BaseEvent {
-  return { type: EventType.RUN_FINISHED } as BaseEvent;
+export function runFinishedEvent(
+  input: Pick<RunAgentInput, "threadId" | "runId"> = {
+    threadId: "test-thread",
+    runId: "test-run",
+  },
+): RunFinishedEvent {
+  return {
+    type: EventType.RUN_FINISHED,
+    threadId: input.threadId,
+    runId: input.runId,
+  };
 }
 
 export function stateSnapshotEvent(snapshot: unknown): BaseEvent {
@@ -684,7 +704,7 @@ export class SuggestionsProviderAgent extends MockStepwiseAgent {
     setTimeout(() => {
       void (async () => {
         const messageId = testId("suggest-msg");
-        await this.emit({ type: EventType.RUN_STARTED } as BaseEvent);
+        await this.emit(runStartedEvent(_input));
 
         await emitSuggestionToolCall(this, {
           toolCallId: testId("tc"),
@@ -692,7 +712,7 @@ export class SuggestionsProviderAgent extends MockStepwiseAgent {
           suggestions: this._suggestions,
         });
 
-        await this.emit({ type: EventType.RUN_FINISHED } as BaseEvent);
+        await this.emit(runFinishedEvent(_input));
         await this.complete();
       })();
     }, 0);

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

@@ -1,9 +1,5 @@
 <script setup lang="ts">
-import {
-  AGUIConnectNotImplementedError,
-  AbstractAgent,
-  HttpAgent,
-} from "@ag-ui/client";
+import { AGUIConnectNotImplementedError, AbstractAgent } from "@ag-ui/client";
 import {
   createAttachmentContent,
   DEFAULT_AGENT_ID,
@@ -21,7 +17,7 @@ import {
   useSlots,
   watch,
 } from "vue";
-import { CopilotKitCoreErrorCode } from "@copilotkit/core";
+import { CopilotKitCoreErrorCode, ɵisHttpAgent } from "@copilotkit/core";
 import type { Suggestion } from "@copilotkit/core";
 import CopilotChatConfigurationProvider from "../../providers/CopilotChatConfigurationProvider.vue";
 import { useCopilotChatConfiguration } from "../../providers/useCopilotChatConfiguration";
@@ -111,9 +107,15 @@ type ActiveConnectCycle = {
   inspectorRequestId: string | null;
   abortController: AbortController;
   detached: boolean;
+  clearDiscardedBaseline?: () => void;
 };
 
 const activeConnectCycle = shallowRef<ActiveConnectCycle | null>(null);
+let lastConnectCycle: ActiveConnectCycle | null = null;
+const detachPromises = new WeakMap<AbstractAgent, Promise<void>>();
+// Agent clones can share cursors. Finish every old reset before connecting again.
+let pendingTeardown = Promise.resolve();
+const baselineThreadIds = new WeakMap<AbstractAgent, string>();
 
 const resolvedAgentId = computed(
   () => props.agentId ?? existingConfig.value?.agentId ?? DEFAULT_AGENT_ID,
@@ -379,6 +381,7 @@ watch(
     // React does — makes the ordering unconditional instead of depending on
     // watcher scheduling. Non-explicit threads skip /connect below, but the first
     // runAgent still has to ship the thread the UI is rendering.
+    baselineThreadIds.set(currentAgent, currentAgent.threadId);
     currentAgent.threadId = threadId;
 
     // When the caller hasn't picked a specific thread, resolvedThreadId is
@@ -421,10 +424,6 @@ watch(
       cycle = existingCycle;
     } else {
       const connectAbortController = new AbortController();
-      if (currentAgent instanceof HttpAgent) {
-        currentAgent.abortController = connectAbortController;
-      }
-
       cycle = {
         core: core as object,
         agent: currentAgent,
@@ -434,11 +433,18 @@ watch(
         detached: false,
       };
       activeConnectCycle.value = cycle;
-
-      void core
-        .connectAgent({ agent: currentAgent })
+      lastConnectCycle = cycle;
+
+      void pendingTeardown
+        .then(() => {
+          if (cycle.detached) return;
+          if (ɵisHttpAgent(currentAgent))
+            currentAgent.abortController = connectAbortController;
+          return core.connectAgent({ agent: currentAgent });
+        })
         .catch((error: unknown) => {
           if (cycle.detached) {
+            cycle.clearDiscardedBaseline?.();
             return;
           }
           if (error instanceof AGUIConnectNotImplementedError) {
@@ -460,6 +466,7 @@ watch(
           // can briefly render against an incompletely-laid-out message
           // tree and visibly snap once the last text chunk lands.
           if (cycle.detached) {
+            cycle.clearDiscardedBaseline?.();
             return;
           }
           const raf =
@@ -490,7 +497,17 @@ watch(
 
       activeCycle.detached = true;
       activeCycle.abortController.abort();
-      void activeCycle.agent.detachActiveRun?.();
+      const detach = activeCycle.agent
+        .detachActiveRun()
+        .catch((error: unknown) => {
+          console.error("CopilotChat: detachActiveRun failed", error);
+        });
+      detachPromises.set(activeCycle.agent, detach);
+      pendingTeardown = Promise.all([pendingTeardown, detach]).then(() => {});
+      void detach.then(() => {
+        if (detachPromises.get(activeCycle.agent) === detach)
+          detachPromises.delete(activeCycle.agent);
+      });
       activeConnectCycle.value = null;
     });
   },
@@ -502,17 +519,80 @@ watch(
 // replay their history via the /connect cycle above, and the very first
 // resolution (mount) or an agent-store swap that keeps the same thread id
 // must never clear — only a real fresh-thread transition does.
-const lastFreshThreadId = ref<string | undefined>(undefined);
+let lastFreshSelection:
+  | { threadId: string; agent: AbstractAgent | null }
+  | undefined;
 watch(
   [resolvedThreadId, hasExplicitThreadId, () => agent.value],
-  ([threadId, isExplicit, currentAgent]) => {
-    const previous = lastFreshThreadId.value;
-    lastFreshThreadId.value = threadId;
+  ([threadId, isExplicit, currentAgent], _old, onCleanup) => {
+    const previous = lastFreshSelection;
+    const selection = { threadId, agent: currentAgent };
+    lastFreshSelection = selection;
     if (!currentAgent) return;
     if (isExplicit) return;
     if (previous === undefined) return;
-    if (threadId === previous) return;
-    currentAgent.setMessages([]);
+    if (threadId === previous.threadId) return;
+    let active = true;
+    let resetPending = true;
+    onCleanup(() => {
+      active = false;
+    });
+    const discardedThreadId =
+      previous.agent === currentAgent
+        ? previous.threadId
+        : baselineThreadIds.get(currentAgent);
+    const clearCursor = () => {
+      if (!discardedThreadId) return;
+      if (
+        "clearReplayCursor" in currentAgent &&
+        typeof currentAgent.clearReplayCursor === "function"
+      )
+        currentAgent.clearReplayCursor(discardedThreadId);
+      if (
+        "clearReconnectCursor" in currentAgent &&
+        typeof currentAgent.clearReconnectCursor === "function"
+      )
+        currentAgent.clearReconnectCursor(discardedThreadId);
+    };
+    const clearDiscardedBaseline = () => {
+      if (
+        !active ||
+        !resetPending ||
+        isUnmounting.value ||
+        lastFreshSelection !== selection ||
+        agent.value !== currentAgent
+      )
+        return;
+      currentAgent.setMessages([]);
+      currentAgent.setState({});
+      currentAgent.pendingInterrupts = [];
+      clearCursor();
+    };
+    if (
+      lastConnectCycle?.agent === currentAgent &&
+      lastConnectCycle.threadId === discardedThreadId
+    )
+      lastConnectCycle.clearDiscardedBaseline = clearDiscardedBaseline;
+    const detach =
+      detachPromises.get(currentAgent) ?? currentAgent.detachActiveRun();
+    detachPromises.set(currentAgent, detach);
+    const finishReset = () => {
+      if (!resetPending) return;
+      // The cursor belongs to the discarded view, even after a fast reopen.
+      clearCursor();
+      clearDiscardedBaseline();
+      resetPending = false;
+    };
+    clearDiscardedBaseline();
+    pendingTeardown = Promise.all([pendingTeardown, detach])
+      .then(finishReset)
+      .catch((error: unknown) => {
+        console.error("CopilotChat: detachActiveRun failed", error);
+      })
+      .finally(() => {
+        if (detachPromises.get(currentAgent) === detach)
+          detachPromises.delete(currentAgent);
+      });
   },
   { immediate: true },
 );

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

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed, onMounted, ref, useSlots, watch } from "vue";
-import type { Component } from "vue";
+import type { Component, FunctionalComponent, VNodeChild } from "vue";
 import type {
   ActivityMessage,
   AssistantMessage,
@@ -262,9 +262,11 @@ function getMeta(
     ? Math.max(messageIdsInRun.indexOf(message.id), 0)
     : 0;
   const numberOfMessagesInRun = resolvedRunId ? messageIdsInRun.length : 1;
-  const stateSnapshot = resolvedRunId
-    ? core.getStateByRun(agentId, threadId, resolvedRunId)
-    : undefined;
+
+  // `getStateByRun` deep-clones the whole run state, so resolve it only when
+  // a consumer reads `stateSnapshot`, and at most once per meta object.
+  let stateSnapshot: unknown;
+  let stateSnapshotResolved = false;
 
   return {
     runId,
@@ -272,10 +274,37 @@ function getMeta(
     messageIndexInRun,
     numberOfMessagesInRun,
     agentId,
-    stateSnapshot,
+    get stateSnapshot() {
+      if (!stateSnapshotResolved) {
+        stateSnapshotResolved = true;
+        stateSnapshot = resolvedRunId
+          ? core.getStateByRun(agentId, threadId, resolvedRunId)
+          : undefined;
+      }
+      return stateSnapshot;
+    },
   };
 }
 
+// `Object.assign` onto the meta object keeps the lazy `stateSnapshot` getter.
+// A spread would call it.
+function getMessageSlotProps(
+  message: Message,
+  position: MessageMetaProps["position"],
+): MessageMetaProps {
+  return Object.assign(getMeta(message), { message, position });
+}
+
+// Calls a `#message-before` / `#message-after` slot with the meta object
+// itself. A template `<slot v-bind>` inside `v-for` goes through
+// `mergeProps`, which reads every key and so would clone the run state for
+// slots that never read `stateSnapshot`.
+const MessageMetaSlot: FunctionalComponent<{
+  render: (props: MessageMetaProps) => unknown;
+  slotProps: MessageMetaProps;
+}> = ({ render, slotProps }) => render(slotProps) as VNodeChild;
+MessageMetaSlot.props = ["render", "slotProps"];
+
 function getActivitySlotName(activityType: string): `activity-${string}` {
   return `activity-${activityType}`;
 }
@@ -310,11 +339,7 @@ function resolveCustomMessageRenderer(
 
   return {
     renderer: selected.render as ResolvedCustomMessageRenderer["renderer"],
-    props: {
-      ...getMeta(message),
-      message,
-      position,
-    },
+    props: getMessageSlotProps(message, position),
   };
 }
 
@@ -370,17 +395,10 @@ function resolveToolMessage(
       v-for="message in deduplicatedMessages"
       :key="rowRenderKeys.get(message.id) ?? message.id"
     >
-      <slot
+      <MessageMetaSlot
         v-if="componentSlots['message-before']"
-        name="message-before"
-        :message="message"
-        position="before"
-        :run-id="getMeta(message).runId"
-        :message-index="getMeta(message).messageIndex"
-        :message-index-in-run="getMeta(message).messageIndexInRun"
-        :number-of-messages-in-run="getMeta(message).numberOfMessagesInRun"
-        :agent-id="getMeta(message).agentId"
-        :state-snapshot="getMeta(message).stateSnapshot"
+        :render="componentSlots['message-before']"
+        :slot-props="getMessageSlotProps(message, 'before')"
       />
       <component
         v-else-if="resolveCustomMessageRenderer(message, 'before')"
@@ -463,17 +481,10 @@ function resolveToolMessage(
         </slot>
       </slot>
 
-      <slot
+      <MessageMetaSlot
         v-if="componentSlots['message-after']"
-        name="message-after"
-        :message="message"
-        position="after"
-        :run-id="getMeta(message).runId"
-        :message-index="getMeta(message).messageIndex"
-        :message-index-in-run="getMeta(message).messageIndexInRun"
-        :number-of-messages-in-run="getMeta(message).numberOfMessagesInRun"
-        :agent-id="getMeta(message).agentId"
-        :state-snapshot="getMeta(message).stateSnapshot"
+        :render="componentSlots['message-after']"
+        :slot-props="getMessageSlotProps(message, 'after')"
       />
       <component
         v-else-if="resolveCustomMessageRenderer(message, 'after')"

package/src/v2/components/chat/__tests__/CopilotChat.clearOnFresh.test.ts

@@ -1,5 +1,5 @@
 import { describe, expect, it, vi } from "vitest";
-import { defineComponent, h, nextTick } from "vue";
+import { defineComponent, h, nextTick, ref } from "vue";
 import { flushPromises, mount } from "@vue/test-utils";
 import CopilotKitProvider from "../../../providers/CopilotKitProvider.vue";
 import CopilotChatConfigurationProvider from "../../../providers/CopilotChatConfigurationProvider.vue";
@@ -14,6 +14,134 @@ import CopilotChat from "../CopilotChat.vue";
 //     configuration transitions to a fresh, non-explicit thread via
 //     startNewThread()
 describe("CopilotChat clear-on-fresh", () => {
+  it.each(["clearReplayCursor", "clearReconnectCursor"] as const)(
+    "clears state and the captured %s cursor on a fresh selection",
+    async (method) => {
+      const agent = new StateCapturingAgent();
+      const cursors = new Map<string, string>();
+      Object.defineProperty(agent, method, {
+        value: (threadId: string) => cursors.delete(threadId),
+      });
+      const threadId = ref("saved");
+      const explicit = ref(true);
+      const wrapper = mount(CopilotKitProvider, {
+        props: { agents__unsafe_dev_only: { default: agent } },
+        slots: {
+          default: () =>
+            h(
+              CopilotChatConfigurationProvider,
+              { threadId: threadId.value, hasExplicitThreadId: explicit.value },
+              { default: () => h(CopilotChat, { welcomeScreen: false }) },
+            ),
+        },
+      });
+      await flushPromises();
+      agent.setState({ saved: true });
+      agent.pendingInterrupts = [{ id: "approval-A", reason: "confirmation" }];
+      cursors.set("saved", "last-event");
+      cursors.set("other", "keep-other");
+      threadId.value = "fresh";
+      explicit.value = false;
+      await flushPromises();
+      expect(agent.state).toEqual({});
+      expect(agent.pendingInterrupts).toEqual([]);
+      expect(cursors.get("saved")).toBeUndefined();
+      expect(cursors.get("other")).toBe("keep-other");
+      wrapper.unmount();
+    },
+  );
+  it.each(["fresh", "saved", "other", "via-fresh", "swap"])(
+    "protects %s from an abandoned connect that completes later",
+    async (destination) => {
+      let releaseDetach = () => {};
+      let releaseConnect = () => {};
+      let pendingDetach: Promise<void> | undefined;
+      const oldConnect = new Promise<void>((resolve) => {
+        releaseConnect = resolve;
+      });
+      const cursors = new Map<string, string>();
+      const requests: (string | null)[] = [];
+      class ReplayAgent extends StateCapturingAgent {
+        clearReplayCursor(threadId: string) {
+          cursors.delete(threadId);
+        }
+        async detachActiveRun() {
+          await pendingDetach;
+          await super.detachActiveRun();
+        }
+        async connectAgent(
+          ...args: Parameters<StateCapturingAgent["connectAgent"]>
+        ) {
+          requests.push(cursors.get(this.threadId) ?? null);
+          const first = requests.length === 1;
+          const result = await super.connectAgent(...args);
+          if (first) await oldConnect;
+          return result;
+        }
+      }
+      const agent = new ReplayAgent();
+      let currentAgent = agent;
+      const threadId = ref("saved");
+      const explicit = ref(true);
+      const wrapper = mount(CopilotKitProvider, {
+        props: { agents__unsafe_dev_only: { default: agent } },
+        slots: {
+          default: () =>
+            h(
+              CopilotChatConfigurationProvider,
+              { threadId: threadId.value, hasExplicitThreadId: explicit.value },
+              { default: () => h(CopilotChat, { welcomeScreen: false }) },
+            ),
+        },
+      });
+      await flushPromises();
+      expect(requests).toEqual([null]);
+      pendingDetach = new Promise<void>((resolve) => {
+        releaseDetach = resolve;
+      });
+      cursors.set("saved", "old-event");
+      threadId.value = "fresh";
+      explicit.value = false;
+      await nextTick();
+      if (destination === "via-fresh") {
+        threadId.value = "fresh-again";
+        await nextTick();
+      }
+      if (destination === "swap") {
+        currentAgent = new ReplayAgent();
+        await wrapper.setProps({
+          agents__unsafe_dev_only: { default: currentAgent },
+        });
+      }
+      const target =
+        destination === "via-fresh" || destination === "swap"
+          ? "saved"
+          : destination;
+      if (target !== "fresh") {
+        threadId.value = target;
+        explicit.value = true;
+        await nextTick();
+      }
+      expect(requests).toEqual([null]);
+      cursors.set("saved", "late-event");
+      releaseDetach();
+      await flushPromises();
+      expect(requests).toEqual(target === "fresh" ? [null] : [null, null]);
+      currentAgent.setState({ current: true });
+      currentAgent.pendingInterrupts = [
+        { id: "approval-new", reason: "confirmation" },
+      ];
+      cursors.set(target, "new-event");
+      releaseConnect();
+      await flushPromises();
+      expect(currentAgent.state).toEqual({ current: true });
+      expect(currentAgent.pendingInterrupts).toEqual([
+        { id: "approval-new", reason: "confirmation" },
+      ]);
+      expect(cursors.get(target)).toBe("new-event");
+      wrapper.unmount();
+    },
+  );
   it("does not clear messages on initial mount", async () => {
     const agent = new StateCapturingAgent();
     // Spy before mount: attaching afterwards can never observe a mount-time
@@ -133,7 +261,7 @@ describe("CopilotChat clear-on-fresh", () => {
     await nextTick();
     expect(currentThreadId).toBe("elsewhere");
 
-    newAgent!.setMessages([{ id: "m1", role: "user", content: "hi" } as never]);
+    newAgent!.setMessages([{ id: "m1", role: "user", content: "hi" }]);
     expect(newAgent!.messages.length).toBe(1);
 
     // Switch back non-explicitly. Any `setMessages([])` observed here must come

package/src/v2/components/chat/__tests__/CopilotChat.e2e.test.ts

@@ -3,6 +3,7 @@ import { computed, defineComponent, onMounted } from "vue";
 import type { PropType } from "vue";
 import { afterEach, describe, expect, it, vi } from "vitest";
 import { EventType } from "@ag-ui/client";
+import type { RunErrorEvent } from "@ag-ui/client";
 import { z } from "zod";
 import { useConfigureSuggestions } from "../../../hooks/use-configure-suggestions";
 import {
@@ -189,7 +190,11 @@ describe("CopilotChat E2E - Chat Basics and Streaming Patterns", () => {
         );
       });
 
-      await agent.emit({ type: EventType.RUN_ERROR } as any);
+      const errorEvent: RunErrorEvent = {
+        type: EventType.RUN_ERROR,
+        message: "Test run failed",
+      };
+      await agent.emit(errorEvent);
       await agent.complete();
 
       await waitFor(() => {