@copilotkit/vue 1.72.1-canary.sp-longthread-perf → 1.73.1

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

@@ -157,6 +157,43 @@ describe("CopilotSidebarView", () => {
     expect(onSelectSuggestion).toHaveBeenCalledTimes(1);
   });
 
+  it("only exposes stop capability when an onStop callback is available", async () => {
+    const withoutStop = mountSidebarView(
+      {},
+      {
+        "welcome-screen": ({ canStop }: { canStop: boolean }) =>
+          h("div", { "data-testid": "sidebar-can-stop" }, String(canStop)),
+      },
+    );
+
+    expect(withoutStop.get("[data-testid='sidebar-can-stop']").text()).toBe(
+      "false",
+    );
+
+    const onStop = vi.fn();
+    const withStop = mountSidebarView(
+      { onStop },
+      {
+        "welcome-screen": ({
+          canStop,
+          onStop: stop,
+        }: {
+          canStop: boolean;
+          onStop: () => void;
+        }) =>
+          h(
+            "button",
+            { "data-testid": "sidebar-stop", onClick: stop },
+            String(canStop),
+          ),
+      },
+    );
+
+    expect(withStop.get("[data-testid='sidebar-stop']").text()).toBe("true");
+    await withStop.get("[data-testid='sidebar-stop']").trigger("click");
+    expect(onStop).toHaveBeenCalledTimes(1);
+  });
+
   it("uses the default chat welcome screen and still forwards welcome sub-slots", () => {
     const wrapper = mountSidebarView(
       {
@@ -211,4 +248,60 @@ describe("CopilotSidebarView", () => {
       "Hello",
     );
   });
+
+  it("exposes reactive capability flags from the namespaced WelcomeScreen input slot", async () => {
+    const wrapper = mount(CopilotSidebarView.WelcomeScreen, {
+      props: {
+        suggestions: [],
+        loadingIndexes: [],
+        modelValue: "",
+        isRunning: false,
+        inputMode: "input",
+        inputToolsMenu: [],
+        onUpdateModelValue: vi.fn(),
+        onSubmitMessage: vi.fn(),
+        onSelectSuggestion: vi.fn(),
+      },
+      slots: {
+        input: ({
+          canStop,
+          canAddFile,
+          canTranscribe,
+        }: {
+          canStop: boolean;
+          canAddFile: boolean;
+          canTranscribe: boolean;
+        }) =>
+          h(
+            "div",
+            { "data-testid": "sidebar-welcome-capabilities" },
+            `${canStop}:${canAddFile}:${canTranscribe}`,
+          ),
+      },
+    });
+
+    expect(
+      wrapper.get("[data-testid='sidebar-welcome-capabilities']").text(),
+    ).toBe("false:false:false");
+
+    await wrapper.setProps({
+      onStop: vi.fn(),
+      onAddFile: vi.fn(),
+      onStartTranscribe: vi.fn(),
+    });
+
+    expect(
+      wrapper.get("[data-testid='sidebar-welcome-capabilities']").text(),
+    ).toBe("true:true:true");
+
+    await wrapper.setProps({
+      canStop: false,
+      canAddFile: false,
+      canTranscribe: false,
+    });
+
+    expect(
+      wrapper.get("[data-testid='sidebar-welcome-capabilities']").text(),
+    ).toBe("false:false:false");
+  });
 });

package/src/v2/components/chat/types.ts

@@ -57,6 +57,22 @@ export interface CopilotChatViewProps {
   inputValue?: string;
   inputMode?: CopilotChatInputMode;
   inputToolsMenu?: (ToolsMenuItem | "-")[];
+  /** Optional event callbacks used to drive the default input controls. */
+  onSubmitMessage?: (value: string) => void | Promise<void>;
+  /**
+   * Presence drives reactive gating of the default stop control.
+   * Prefer `@stop` / `emit("stop")` for invocation; do not call this prop
+   * directly or the handler can fire twice.
+   */
+  onStop?: () => void;
+  onInputChange?: (value: string) => void;
+  onSelectSuggestion?: (
+    suggestion: Suggestion,
+    index: number,
+  ) => void | Promise<void>;
+  onStartTranscribe?: () => void;
+  onCancelTranscribe?: () => void;
+  onFinishTranscribe?: () => void;
   /**
    * When `true`, suppresses the welcome screen while a thread's initial
    * connect is in flight. Prevents the "How can I help you today?" flash
@@ -93,6 +109,13 @@ export interface CopilotChatProps extends Omit<
   | "onDragOver"
   | "onDragLeave"
   | "onDrop"
+  | "onSubmitMessage"
+  | "onStop"
+  | "onInputChange"
+  | "onSelectSuggestion"
+  | "onStartTranscribe"
+  | "onCancelTranscribe"
+  | "onFinishTranscribe"
 > {
   agentId?: string;
   threadId?: string;
@@ -107,18 +130,21 @@ export interface CopilotChatProps extends Omit<
 }
 
 export interface CopilotChatViewOverrideSlotProps extends CopilotChatViewProps {
+  canStop: boolean;
+  canAddFile: boolean;
+  canTranscribe: boolean;
   onSubmitMessage: (value: string) => void | Promise<void>;
-  onStop?: () => void;
+  onStop: () => void;
   onInputChange: (value: string) => void;
   onSelectSuggestion: (
     suggestion: Suggestion,
     index: number,
   ) => void | Promise<void>;
-  onAddFile?: () => void;
-  onStartTranscribe?: () => void;
-  onCancelTranscribe?: () => void;
-  onFinishTranscribe?: () => void;
-  onFinishTranscribeWithAudio?: (audioBlob: Blob) => void | Promise<void>;
+  onAddFile: () => void;
+  onStartTranscribe: () => void;
+  onCancelTranscribe: () => void;
+  onFinishTranscribe: () => void;
+  onFinishTranscribeWithAudio: (audioBlob: Blob) => void | Promise<void>;
 }
 
 export interface CopilotChatMessageViewSlotProps {
@@ -154,9 +180,12 @@ export interface CopilotChatInputSlotProps {
   isRunning: boolean;
   inputMode: CopilotChatInputMode;
   inputToolsMenu: (ToolsMenuItem | "-")[];
+  canStop: boolean;
+  canAddFile: boolean;
+  canTranscribe: boolean;
   onUpdateModelValue: (value: string) => void;
   onSubmitMessage: (value: string) => void;
-  onStop?: () => void;
+  onStop: () => void;
   onAddFile: () => void;
   onStartTranscribe: () => void;
   onCancelTranscribe: () => void;
@@ -189,9 +218,12 @@ export interface CopilotChatWelcomeScreenSlotProps extends CopilotChatSuggestion
   isRunning: boolean;
   inputMode: CopilotChatInputMode;
   inputToolsMenu: (ToolsMenuItem | "-")[];
+  canStop: boolean;
+  canAddFile: boolean;
+  canTranscribe: boolean;
   onUpdateModelValue: (value: string) => void;
   onSubmitMessage: (value: string) => void;
-  onStop?: () => void;
+  onStop: () => void;
   onAddFile: () => void;
   onStartTranscribe: () => void;
   onCancelTranscribe: () => void;
@@ -402,14 +434,17 @@ export interface CopilotSidebarWelcomeScreenInputSlotProps {
   isRunning: boolean;
   inputMode: CopilotChatInputMode;
   inputToolsMenu: (ToolsMenuItem | "-")[];
+  canStop: boolean;
+  canAddFile: boolean;
+  canTranscribe: boolean;
   onUpdateModelValue: (value: string) => void;
   onSubmitMessage: (value: string) => void;
-  onStop?: () => void;
-  onAddFile?: () => void;
-  onStartTranscribe?: () => void;
-  onCancelTranscribe?: () => void;
-  onFinishTranscribe?: () => void;
-  onFinishTranscribeWithAudio?: (audioBlob: Blob) => void | Promise<void>;
+  onStop: () => void;
+  onAddFile: () => void;
+  onStartTranscribe: () => void;
+  onCancelTranscribe: () => void;
+  onFinishTranscribe: () => void;
+  onFinishTranscribeWithAudio: (audioBlob: Blob) => void | Promise<void>;
 }
 
 export interface CopilotSidebarWelcomeScreenSuggestionViewSlotProps {
@@ -423,8 +458,29 @@ export interface CopilotSidebarWelcomeScreenLayoutSlotProps
     CopilotSidebarWelcomeScreenInputSlotProps,
     CopilotSidebarWelcomeScreenSuggestionViewSlotProps {}
 
-export type CopilotSidebarWelcomeScreenProps =
-  CopilotSidebarWelcomeScreenLayoutSlotProps;
+type WelcomeScreenCommandProps =
+  | "onStop"
+  | "onAddFile"
+  | "onStartTranscribe"
+  | "onCancelTranscribe"
+  | "onFinishTranscribe"
+  | "onFinishTranscribeWithAudio";
+
+type WelcomeScreenDerivedCapabilityProps =
+  | "canStop"
+  | "canAddFile"
+  | "canTranscribe";
+
+export type CopilotSidebarWelcomeScreenProps = Omit<
+  CopilotSidebarWelcomeScreenLayoutSlotProps,
+  WelcomeScreenCommandProps | WelcomeScreenDerivedCapabilityProps
+> &
+  Partial<
+    Pick<
+      CopilotSidebarWelcomeScreenLayoutSlotProps,
+      WelcomeScreenCommandProps | WelcomeScreenDerivedCapabilityProps
+    >
+  >;
 
 export interface CopilotSidebarViewHeaderSlotProps {
   title: string;
@@ -458,8 +514,7 @@ export type CopilotPopupWelcomeScreenSuggestionViewSlotProps =
 export type CopilotPopupWelcomeScreenLayoutSlotProps =
   CopilotSidebarWelcomeScreenLayoutSlotProps;
 
-export type CopilotPopupWelcomeScreenProps =
-  CopilotPopupWelcomeScreenLayoutSlotProps;
+export type CopilotPopupWelcomeScreenProps = CopilotSidebarWelcomeScreenProps;
 
 export interface CopilotPopupViewProps extends CopilotChatViewProps {
   width?: number | string;

package/src/v2/hooks/__tests__/use-human-in-the-loop.e2e.test.ts

@@ -1,7 +1,7 @@
 import { defineComponent, ref, watch } from "vue";
 import type { PropType } from "vue";
 import { screen, fireEvent, waitFor, cleanup } from "@testing-library/vue";
-import { afterEach, describe, expect, it } from "vitest";
+import { afterEach, describe, expect, it, vi } from "vitest";
 import { z } from "zod";
 import type { AssistantMessage, Message } from "@ag-ui/core";
 import { ToolCallStatus } from "@copilotkit/core";
@@ -1100,6 +1100,7 @@ describe("HITL Run Abort", () => {
 describe("HITL Thread Reconnection Bug", () => {
   it("should show executing status when reconnecting to thread with pending HITL", async () => {
     const agent = new MockReconnectableAgent();
+    const handlerStarted = vi.fn();
 
     const HITLRenderer = defineComponent({
       props: {
@@ -1116,7 +1117,7 @@ describe("HITL Thread Reconnection Bug", () => {
         <div data-testid="hitl-tool">
           <div data-testid="hitl-status">{{ status }}</div>
           <div data-testid="hitl-action">{{ args.action ?? "no-action" }}</div>
-          <button v-if="respond" data-testid="hitl-respond">Respond</button>
+          <button v-if="respond" data-testid="hitl-respond" @click="respond('approved')">Respond</button>
         </div>
       `,
     });
@@ -1130,6 +1131,19 @@ describe("HITL Thread Reconnection Bug", () => {
           render: HITLRenderer,
         };
         useHumanInTheLoop(hitlTool);
+        const { copilotkit } = useCopilotKit();
+        const registered = copilotkit.value.getTool({
+          toolName: "approvalTool",
+        });
+        if (!registered?.handler) {
+          throw new Error("HITL handler was not registered");
+        }
+        const originalHandler = registered.handler;
+        registered.handler = (...args) => {
+          const pending = originalHandler(...args);
+          handlerStarted();
+          return pending;
+        };
         return {};
       },
       template: `<div />`,
@@ -1196,11 +1210,23 @@ describe("HITL Thread Reconnection Bug", () => {
       expect(screen.getByTestId("hitl-action").textContent).toBe("delete");
     });
 
-    // Core-level coverage asserts that passive replay does not re-invoke local
-    // frontend handlers for replayed assistant tool calls.
     await waitFor(() => {
-      expect(screen.getByTestId("hitl-status").textContent).toMatch(
-        /^(executing|inProgress)$/,
+      expect(screen.getByTestId("hitl-status").textContent).toBe(
+        ToolCallStatus.Executing,
+      );
+    });
+    // Vue can paint Executing during the awaited execution-start notification,
+    // before core invokes the handler. Wait for the remounted hook to install
+    // its response resolver before dispatching a synchronous test click.
+    await waitFor(() => expect(handlerStarted).toHaveBeenCalledTimes(2));
+    await fireEvent.click(screen.getByTestId("hitl-respond"));
+    await waitFor(() => {
+      expect(agent.messages).toContainEqual(
+        expect.objectContaining({
+          role: "tool",
+          toolCallId,
+          content: "approved",
+        }),
       );
     });
   });

package/src/v2/hooks/use-human-in-the-loop.ts

@@ -111,6 +111,7 @@ export function useHumanInTheLoop<T extends Record<string, unknown>>(
 
   const frontendTool: VueFrontendTool<T> = {
     ...tool,
+    type: "human-in-the-loop",
     handler,
     render: RenderComponent,
   };

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

@@ -1,5 +1,8 @@
 import type { AbstractAgent } from "@ag-ui/client";
-import type { CopilotKitCoreErrorCode } from "@copilotkit/core";
+import type {
+  CopilotKitCoreErrorCode,
+  CopilotKitMessageFilter,
+} from "@copilotkit/core";
 import type { DebugConfig } from "@copilotkit/shared";
 import type {
   A2UITheme,
@@ -16,6 +19,30 @@ export interface CopilotKitProviderProps {
   runtimeUrl?: string;
   headers?: Record<string, string> | (() => Record<string, string>);
   credentials?: RequestCredentials;
+  /**
+   * Rewrites the message list sent to runtime agents on every run.
+   *
+   * CopilotKit sends the whole thread each time. When your agent already
+   * stores the conversation, most of that payload is waste, and an agent that
+   * merges the inbound list with its own store can show the model every turn
+   * twice. Return the messages to send:
+   *
+   * ```vue
+   * <CopilotKitProvider
+   *   runtime-url="/api/copilotkit"
+   *   :message-filter="(messages) => messages.slice(-1)"
+   * />
+   * ```
+   *
+   * The filter changes the request body only. The transcript the UI renders is
+   * untouched. Broken tool-call pairs are repaired before the request is sent,
+   * so a filter this blunt cannot strand a tool result mid-HITL.
+   *
+   * Agents reached through your CopilotRuntime honor this. An agent your app
+   * passes in directly does not, and neither Intelligence runs nor suggestion
+   * runs are ever filtered.
+   */
+  messageFilter?: CopilotKitMessageFilter;
   defaultThrottleMs?: number;
   publicApiKey?: string;
   publicLicenseKey?: string;

package/src/v2/providers/CopilotKitProvider.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import {
   computed,
+  h,
   onMounted,
   provide,
   ref,
@@ -10,6 +11,7 @@ import {
 } from "vue";
 import { z } from "zod";
 import type { AbstractAgent } from "@ag-ui/client";
+import { ToolCallStatus } from "@copilotkit/core";
 import type {
   CopilotKitCoreErrorCode,
   CopilotKitCoreSubscriber,
@@ -52,6 +54,7 @@ import type {
   VueActivityMessageRenderer,
   VueFrontendTool,
   VueToolCallRenderer,
+  VueToolCallRendererRenderProps,
 } from "../types";
 
 const HEADER_NAME = "X-CopilotCloud-Public-Api-Key";
@@ -70,6 +73,10 @@ const RENDER_ACTIVITY_MESSAGES_STABLE_WARNING =
   "renderActivityMessages must be a stable array.";
 const SANDBOX_FUNCTIONS_STABLE_WARNING =
   "openGenerativeUI.sandboxFunctions must be a stable array.";
+// Matches the message React's `useHumanInTheLoop` rejects with, so an aborted
+// interrupt reads the same across frameworks (see #5554).
+const HUMAN_IN_THE_LOOP_ABORTED_MESSAGE =
+  "Human-in-the-loop interaction aborted";
 const DEFAULT_DESIGN_SKILL = `When generating UI with generateSandboxedUi, follow these design principles inspired by shadcn/ui:
 
 - Use a minimal, flat aesthetic. Avoid drop shadows and gradients — rely on subtle borders (1px solid, light gray like #e5e7eb) to define surfaces.
@@ -228,29 +235,99 @@ watch(
   { immediate: true },
 );
 
+/**
+ * A human-in-the-loop tool call from the `humanInTheLoop` prop that is waiting
+ * on the user. Keyed by tool call id so parallel interrupts on the same tool
+ * stay independent.
+ */
+type PendingHumanInTheLoop = {
+  resolve: (result: unknown) => void;
+  detachAbort?: () => void;
+};
+
+const pendingHumanInTheLoop = new Map<string, PendingHumanInTheLoop>();
+
+/** Removes a pending interaction and detaches its abort listener. */
+const takePendingHumanInTheLoop = (key: string) => {
+  const pending = pendingHumanInTheLoop.get(key);
+  if (!pending) return undefined;
+  pending.detachAbort?.();
+  pendingHumanInTheLoop.delete(key);
+  return pending;
+};
+
 const processedHumanInTheLoop = computed(() => {
   const tools: FrontendTool[] = [];
   const renderToolCalls: VueToolCallRenderer<unknown>[] = [];
 
   for (const tool of props.humanInTheLoop) {
     tools.push({
+      type: "human-in-the-loop",
       name: tool.name,
       description: tool.description,
       parameters: tool.parameters,
       followUp: tool.followUp,
       ...(tool.agentId && { agentId: tool.agentId }),
-      handler: async () => {
-        console.warn(
-          `Human-in-the-loop tool '${tool.name}' called but no interactive handler is set up.`,
-        );
-        return undefined;
+      // Keep the tool call pending until the render calls `respond`, matching
+      // the `useHumanInTheLoop` composable. Resolving immediately made the HITL
+      // UI flash and disappear without ever waiting for the user.
+      handler: async (_args, context) => {
+        const signal = context?.signal;
+        const key = context?.toolCall?.id ?? tool.name;
+
+        return new Promise((resolve, reject) => {
+          // Already aborted before the handler ran — reject so core records an
+          // explicit error tool result rather than silently resolving empty.
+          if (signal?.aborted) {
+            reject(new Error(HUMAN_IN_THE_LOOP_ABORTED_MESSAGE));
+            return;
+          }
+
+          const pending: PendingHumanInTheLoop = { resolve };
+          pendingHumanInTheLoop.set(key, pending);
+
+          if (signal) {
+            const onAbort = () => {
+              pendingHumanInTheLoop.delete(key);
+              reject(new Error(HUMAN_IN_THE_LOOP_ABORTED_MESSAGE));
+            };
+            signal.addEventListener("abort", onAbort, { once: true });
+            pending.detachAbort = () => {
+              signal.removeEventListener("abort", onAbort);
+            };
+          }
+        });
       },
     });
     if (tool.render) {
+      const ToolComponent = tool.render;
+      const render: VueToolCallRenderer<unknown>["render"] = (
+        renderProps: VueToolCallRendererRenderProps<unknown>,
+      ) => {
+        const key = renderProps.toolCallId ?? tool.name;
+        return h(ToolComponent as Parameters<typeof h>[0], {
+          ...renderProps,
+          // `renderProps.name` is the tool that was actually invoked. It equals
+          // `tool.name` for a named registration; for a wildcard (`"*"`) it is
+          // the only place the real name exists.
+          name: tool.name === "*" ? renderProps.name : tool.name,
+          description: tool.description || "",
+          agentId: tool.agentId,
+          // `respond` is live only while the tool is executing — the one phase
+          // with a promise waiting on the user.
+          respond:
+            renderProps.status === ToolCallStatus.Executing
+              ? async (result: unknown) => {
+                  takePendingHumanInTheLoop(key)?.resolve(result);
+                }
+              : undefined,
+        });
+      };
+
       renderToolCalls.push({
         name: tool.name,
         args: tool.parameters ?? z.any(),
-        render: tool.render,
+        render,
         ...(tool.agentId && { agentId: tool.agentId }),
       } as VueToolCallRenderer<unknown>);
     }
@@ -407,6 +484,7 @@ const createCopilotKit = () => {
           : "auto",
     headers: mergedHeaders.value,
     credentials: props.credentials,
+    messageFilter: props.messageFilter,
     properties: resolvedProperties.value,
     agents__unsafe_dev_only: mergedAgents.value,
     tools: allTools.value,
@@ -525,6 +603,7 @@ function syncRuntimeConfig() {
   );
   copilotkit.value.setHeaders(mergedHeaders.value);
   copilotkit.value.setCredentials(props.credentials);
+  copilotkit.value.setMessageFilter(props.messageFilter);
   copilotkit.value.setProperties(resolvedProperties.value);
   copilotkit.value.setAgents__unsafe_dev_only(mergedAgents.value);
   copilotkit.value.setDebug(props.debug);
@@ -536,6 +615,7 @@ watch(
     () => chatApiEndpoint.value,
     () => mergedHeaders.value,
     () => props.credentials,
+    () => props.messageFilter,
     () => resolvedProperties.value,
     () => mergedAgents.value,
     () => props.useSingleEndpoint,