@copilotkit/vue 1.68.3 → 1.69.1

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

@@ -0,0 +1,126 @@
+import type { Message, ToolCall, ToolMessage } from "@ag-ui/core";
+import { DEFAULT_AGENT_ID } from "@copilotkit/shared";
+import { ToolCallStatus } from "@copilotkit/core";
+import { partialJSONParse } from "@copilotkit/shared";
+import type { CopilotChatToolCallRenderSlotProps } from "./types";
+import type {
+  VueToolCallRenderer,
+  VueToolCallRendererRenderProps,
+} from "../../types";
+
+export function findToolMessage(
+  messages: Message[],
+  toolCallId: string,
+): ToolMessage | undefined {
+  return messages.find(
+    (message) =>
+      message.role === "tool" &&
+      (message as ToolMessage).toolCallId === toolCallId,
+  ) as ToolMessage | undefined;
+}
+
+export function getToolCallSlotName(toolName: string): `tool-call-${string}` {
+  return `tool-call-${toolName}`;
+}
+
+export function getCoreRenderConfig(
+  toolCall: ToolCall,
+  renderToolCalls: readonly VueToolCallRenderer<unknown>[],
+  agentId: string,
+): VueToolCallRenderer<unknown> | undefined {
+  const exactMatches = renderToolCalls.filter(
+    (renderConfig) => renderConfig.name === toolCall.function.name,
+  );
+
+  return (
+    exactMatches.find((renderConfig) => renderConfig.agentId === agentId) ??
+    exactMatches.find((renderConfig) => !renderConfig.agentId) ??
+    exactMatches[0] ??
+    renderToolCalls.find((renderConfig) => renderConfig.name === "*")
+  );
+}
+
+export function getToolCallRenderProps(
+  toolCall: ToolCall,
+  messages: Message[],
+  executingToolCallIds: ReadonlySet<string>,
+): CopilotChatToolCallRenderSlotProps {
+  const toolMessage = findToolMessage(messages, toolCall.id);
+  const parsedArgs = partialJSONParse(toolCall.function.arguments);
+
+  if (toolMessage) {
+    return {
+      name: toolCall.function.name,
+      args: parsedArgs,
+      status: ToolCallStatus.Complete,
+      result: toolMessage.content,
+      toolCall,
+      toolMessage,
+    };
+  }
+
+  const isExecuting = executingToolCallIds.has(toolCall.id);
+  return {
+    name: toolCall.function.name,
+    args: parsedArgs,
+    status: isExecuting ? ToolCallStatus.Executing : ToolCallStatus.InProgress,
+    result: undefined,
+    toolCall,
+    toolMessage: undefined,
+  };
+}
+
+export function getCoreRenderProps(
+  toolCall: ToolCall,
+  messages: Message[],
+  executingToolCallIds: ReadonlySet<string>,
+): VueToolCallRendererRenderProps<unknown> {
+  const toolMessage = findToolMessage(messages, toolCall.id);
+  const parsedArgs = partialJSONParse(toolCall.function.arguments);
+
+  if (toolMessage) {
+    return {
+      name: toolCall.function.name,
+      toolCallId: toolCall.id,
+      args: parsedArgs,
+      status: ToolCallStatus.Complete,
+      result: toolMessage.content,
+    };
+  }
+
+  const isExecuting = executingToolCallIds.has(toolCall.id);
+  if (isExecuting) {
+    return {
+      name: toolCall.function.name,
+      toolCallId: toolCall.id,
+      args: parsedArgs,
+      status: ToolCallStatus.Executing,
+      result: undefined,
+    };
+  }
+
+  return {
+    name: toolCall.function.name,
+    toolCallId: toolCall.id,
+    args: parsedArgs && typeof parsedArgs === "object" ? parsedArgs : {},
+    status: ToolCallStatus.InProgress,
+    result: undefined,
+  };
+}
+
+export function getToolCallMemoDeps(
+  toolCall: ToolCall,
+  messages: Message[],
+  executingToolCallIds: ReadonlySet<string>,
+  renderToolCalls: readonly VueToolCallRenderer<unknown>[],
+  agentId: string = DEFAULT_AGENT_ID,
+): unknown[] {
+  return [
+    toolCall.id,
+    toolCall.function.name,
+    toolCall.function.arguments,
+    findToolMessage(messages, toolCall.id)?.content,
+    executingToolCallIds.has(toolCall.id),
+    getCoreRenderConfig(toolCall, renderToolCalls, agentId)?.render,
+  ];
+}

package/src/v2/components/chat/save-snippet-beside.ts

@@ -0,0 +1,84 @@
+export const SAVE_SNIPPET_ICON_SLOT_PX = 36;
+
+export const SAVE_SNIPPET_BESIDE_WRAP_CLASS =
+  "cpk:relative cpk:w-full cpk:overflow-visible";
+
+export const SAVE_SNIPPET_BESIDE_BODY_CLASS = "cpk:w-full";
+
+export const SAVE_SNIPPET_BESIDE_SAVE_CLASS = "cpk:absolute cpk:top-0 cpk:z-10";
+
+export function saveSnippetBesideStyle(side: "left" | "right") {
+  if (side === "left") {
+    return {
+      left: "auto",
+      right: "100%",
+      marginLeft: "0px",
+      marginRight: "4px",
+    } as const;
+  }
+  return {
+    left: "100%",
+    right: "auto",
+    marginLeft: "4px",
+    marginRight: "0px",
+  } as const;
+}
+
+export function pickSaveSnippetSide(
+  roomRight: number,
+  roomLeft: number,
+  slotPx = SAVE_SNIPPET_ICON_SLOT_PX,
+): "left" | "right" {
+  if (roomRight >= slotPx) {
+    return "right";
+  }
+  if (roomLeft >= slotPx) {
+    return "left";
+  }
+  return "right";
+}
+
+export function findOverflowAncestor(el: HTMLElement): HTMLElement {
+  let node: HTMLElement | null = el.parentElement;
+  while (node) {
+    const style = getComputedStyle(node);
+    const overflowX = style.overflowX;
+    const overflow = style.overflow;
+    if (
+      overflowX === "hidden" ||
+      overflowX === "auto" ||
+      overflowX === "scroll" ||
+      overflow === "hidden" ||
+      overflow === "auto" ||
+      overflow === "scroll"
+    ) {
+      return node;
+    }
+    node = node.parentElement;
+  }
+  return document.documentElement;
+}
+
+export function measurableBox(el: HTMLElement): HTMLElement {
+  let node: HTMLElement | null = el;
+  while (node && getComputedStyle(node).display === "contents") {
+    node = node.firstElementChild as HTMLElement | null;
+  }
+  return node ?? el;
+}
+
+export function measureSaveSnippetSide(
+  wrap: HTMLElement,
+  body: HTMLElement,
+): "left" | "right" {
+  const clip = findOverflowAncestor(wrap);
+  const clipRect = clip.getBoundingClientRect();
+  const box = measurableBox(
+    (body.firstElementChild as HTMLElement | null) ?? body,
+  );
+  const bodyRect = box.getBoundingClientRect();
+  return pickSaveSnippetSide(
+    clipRect.right - bodyRect.right,
+    bodyRect.left - clipRect.left,
+  );
+}

package/src/v2/components/icons/__tests__/icons.test.ts

@@ -2,6 +2,7 @@ import { describe, expect, it } from "vitest";
 import { mount } from "@vue/test-utils";
 import {
   IconArrowUp,
+  IconBookmark,
   IconCheck,
   IconCheckCircle,
   IconChevronDown,
@@ -31,6 +32,7 @@ describe("icons adapter", () => {
       IconPlus,
       IconMic,
       IconArrowUp,
+      IconBookmark,
       IconCheck,
       IconSquare,
       IconLoader2,

package/src/v2/components/icons/index.ts

@@ -5,6 +5,7 @@ export {
   Plus as IconPlus,
   Mic as IconMic,
   ArrowUp as IconArrowUp,
+  Bookmark as IconBookmark,
   Check as IconCheck,
   Square as IconSquare,
   Loader2 as IconLoader2,

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

@@ -80,7 +80,7 @@ function bindThreadStoreSelector<T>(
 }
 
 /**
- * Vue composable for listing and managing Intelligence platform threads.
+ * Vue composable for listing and managing CopilotKit Intelligence threads.
  *
  * The hook fetches threads for the runtime-authenticated user and the given
  * `agentId`, then keeps the result in sync via the core thread store's realtime

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

@@ -20,7 +20,7 @@ export interface CopilotKitProviderProps {
   publicApiKey?: string;
   publicLicenseKey?: string;
   /**
-   * Signed license token for offline verification of Enterprise Intelligence Platform features.
+   * Signed license token for offline verification of CopilotKit Intelligence features.
    * Obtain from https://dashboard.operations.copilotkit.ai.
    */
   licenseToken?: string;

package/src/v2/providers/CopilotKitProvider.vue

@@ -34,7 +34,8 @@ import {
   MCPAppsActivityRenderer,
   MCPAppsActivityType,
 } from "../components/MCPAppsActivityRenderer";
-import { CopilotKitKey, SandboxFunctionsKey } from "./keys";
+import { CopilotKitKey, InspectorKey, SandboxFunctionsKey } from "./keys";
+import type { VueInspectorOpenRequest, VueInspectorSaveRequest } from "./keys";
 import {
   LicenseContextKey,
   createLicenseContextValue,
@@ -109,28 +110,86 @@ const props = withDefaults(defineProps<CopilotKitProviderProps>(), {
 });
 
 const shouldRenderInspector = ref(false);
+// Mounting the overlay follows showDevConsole. The in-chat affordances are
+// narrower: a dev build on localhost only, so `showDevConsole: true` on a
+// staging URL never puts a bookmark into a production chat. Matches React.
+const canShowLocalInspectorAction = ref(false);
 
 const updateInspectorVisibility = () => {
+  const isLocalhost =
+    typeof window !== "undefined" &&
+    new Set(["localhost", "127.0.0.1"]).has(window.location?.hostname ?? "");
+  canShowLocalInspectorAction.value =
+    process.env.NODE_ENV === "development" && isLocalhost;
+
   if (props.showDevConsole === true) {
     shouldRenderInspector.value = true;
     return;
   }
   if (props.showDevConsole === "auto") {
-    if (typeof window === "undefined") {
-      shouldRenderInspector.value = false;
-      return;
+    shouldRenderInspector.value = isLocalhost;
+    if (!isLocalhost) {
+      canShowLocalInspectorAction.value = false;
     }
-    const localhostHosts = new Set(["localhost", "127.0.0.1"]);
-    shouldRenderInspector.value = localhostHosts.has(window.location.hostname);
     return;
   }
   shouldRenderInspector.value = false;
+  canShowLocalInspectorAction.value = false;
 };
 
 watch(() => props.showDevConsole, updateInspectorVisibility, {
   immediate: true,
 });
 
+const inspectorOpenRequest = ref<VueInspectorOpenRequest | null>(null);
+const isLocalInspectorEnabled = computed(
+  () => shouldRenderInspector.value && canShowLocalInspectorAction.value,
+);
+
+function openInspector(request: VueInspectorOpenRequest) {
+  inspectorOpenRequest.value = { ...request };
+}
+
+async function saveEventSnippet(request: VueInspectorSaveRequest) {
+  try {
+    const mod = await import("@copilotkit/web-inspector");
+    const threadId = request.threadId ?? "inspector-snippet";
+    const runId = `inspector-snippet-${Date.now()}`;
+    const compiled = mod.compileChatSnippet({
+      ...request,
+      threadId,
+      runId,
+    });
+    const now = new Date().toISOString();
+    const snippet = {
+      id: crypto.randomUUID(),
+      name: compiled.name,
+      recipe: compiled.recipe,
+      events: compiled.events,
+      createdAt: now,
+      updatedAt: now,
+    };
+    mod.upsertEventSnippet(snippet);
+    openInspector({
+      messageId: request.messageId,
+      threadId: request.threadId,
+      agentId: request.agentId,
+      menu: "event-snippets",
+      snippetId: snippet.id,
+    });
+  } catch (error) {
+    // Compile can throw on bad args, and storage can throw QuotaExceededError.
+    // Callers fire this as `void saveEventSnippet(...)`, so report it here.
+    console.error("[CopilotKit] Could not save the event snippet.", error);
+  }
+}
+
+provide(InspectorKey, {
+  isLocalInspectorEnabled,
+  openInspector,
+  saveEventSnippet,
+});
+
 const initialFrontendTools = props.frontendTools;
 const initialHumanInTheLoop = props.humanInTheLoop;
 const initialRenderCustomMessages = props.renderCustomMessages;
@@ -657,6 +716,7 @@ const showExpiringBanner = computed(
     v-if="shouldRenderInspector"
     :core="copilotkit"
     :default-anchor="props.inspectorDefaultAnchor"
+    :open-request="inspectorOpenRequest"
   />
   <!-- License warnings — driven by server-reported status -->
   <LicenseWarningBanner v-if="showNoLicenseBanner" type="no_license" />

package/src/v2/providers/__tests__/inspector-thread-override.test.ts

@@ -0,0 +1,214 @@
+import {
+  cleanup,
+  fireEvent,
+  render,
+  screen,
+  waitFor,
+} from "@testing-library/vue";
+import { defineComponent } from "vue";
+import { afterEach, beforeEach, describe, expect, it } from "vitest";
+import {
+  emitInspectorStopViewing,
+  emitInspectorViewThread,
+  onInspectorActiveThread,
+  onInspectorViewThreadResult,
+} from "@copilotkit/core";
+import { DEFAULT_AGENT_ID } from "@copilotkit/shared";
+import { MockStepwiseAgent } from "../../__tests__/utils/test-helpers";
+import CopilotChat from "../../components/chat/CopilotChat.vue";
+import CopilotKitProvider from "../CopilotKitProvider.vue";
+import CopilotChatConfigurationProvider from "../CopilotChatConfigurationProvider.vue";
+import { useCopilotChatConfiguration } from "../useCopilotChatConfiguration";
+
+class TrackingAgent extends MockStepwiseAgent {
+  connectCalls: string[] = [];
+  failThreadId: string | null = null;
+
+  async connectAgent(
+    _params: unknown,
+    _subscriber: unknown,
+  ): Promise<{ result: unknown; newMessages: [] }> {
+    this.connectCalls.push(this.threadId ?? "");
+    if (this.threadId === this.failThreadId) {
+      throw new Error("connect failed");
+    }
+    return { result: undefined, newMessages: [] };
+  }
+}
+
+const ThreadControls = defineComponent({
+  setup() {
+    const configuration = useCopilotChatConfiguration();
+    return { configuration };
+  },
+  template: `
+    <button @click="configuration?.setActiveThreadId('app-picked')">select</button>
+    <button @click="configuration?.startNewThread()">new</button>
+  `,
+});
+
+function renderChat(
+  agent: TrackingAgent,
+  options: { threadId?: string; withControls?: boolean } = {},
+) {
+  agent.agentId = DEFAULT_AGENT_ID;
+  const Root = defineComponent({
+    components: {
+      CopilotChat,
+      CopilotChatConfigurationProvider,
+      CopilotKitProvider,
+      ThreadControls,
+    },
+    setup() {
+      return {
+        agents: { [DEFAULT_AGENT_ID]: agent },
+        threadId: options.threadId,
+        withControls: options.withControls ?? false,
+      };
+    },
+    template: `
+      <CopilotKitProvider :agents__unsafe_dev_only="agents">
+        <CopilotChatConfigurationProvider v-if="withControls" :agent-id="'default'">
+          <CopilotChat :thread-id="threadId" />
+          <ThreadControls />
+        </CopilotChatConfigurationProvider>
+        <CopilotChat v-else :thread-id="threadId" />
+      </CopilotKitProvider>
+    `,
+  });
+  return render(Root);
+}
+
+function viewRequest(requestId: string, threadId = "saved-thread") {
+  return emitInspectorViewThread({
+    requestId,
+    threadId,
+    agentId: DEFAULT_AGENT_ID,
+  });
+}
+
+describe("inspector thread override", () => {
+  const cleanups: Array<() => void> = [];
+
+  beforeEach(() => {
+    cleanups.length = 0;
+  });
+
+  afterEach(() => {
+    for (const unsubscribe of cleanups.splice(0)) unsubscribe();
+    cleanup();
+  });
+
+  it("switches a pinned threadId when view-thread matches the agent", async () => {
+    const agent = new TrackingAgent();
+    renderChat(agent, { threadId: "pinned-thread" });
+    await waitFor(() => expect(agent.threadId).toBe("pinned-thread"));
+
+    expect(viewRequest("request-1")).toBe(true);
+
+    await waitFor(() => expect(agent.threadId).toBe("saved-thread"));
+    expect(agent.connectCalls).toContain("saved-thread");
+  });
+
+  it("ignores view-thread for a different agent", async () => {
+    const agent = new TrackingAgent();
+    renderChat(agent, { threadId: "pinned-thread" });
+    await waitFor(() => expect(agent.threadId).toBe("pinned-thread"));
+
+    expect(
+      emitInspectorViewThread({
+        requestId: "request-2",
+        threadId: "other-thread",
+        agentId: "other-agent",
+      }),
+    ).toBe(false);
+
+    expect(agent.threadId).toBe("pinned-thread");
+  });
+
+  it("restores the previous thread on stop-viewing", async () => {
+    const agent = new TrackingAgent();
+    renderChat(agent, { threadId: "pinned-thread" });
+    viewRequest("request-3");
+    await waitFor(() => expect(agent.threadId).toBe("saved-thread"));
+
+    emitInspectorStopViewing({
+      requestId: "request-3",
+      agentId: DEFAULT_AGENT_ID,
+    });
+
+    await waitFor(() => expect(agent.threadId).toBe("pinned-thread"));
+  });
+
+  it("keeps the original previous thread after a second view-thread", async () => {
+    const agent = new TrackingAgent();
+    renderChat(agent, { threadId: "pinned-thread" });
+    viewRequest("request-4a", "first-saved");
+    await waitFor(() => expect(agent.threadId).toBe("first-saved"));
+    viewRequest("request-4b", "second-saved");
+    await waitFor(() => expect(agent.threadId).toBe("second-saved"));
+
+    emitInspectorStopViewing({
+      requestId: "request-4b",
+      agentId: DEFAULT_AGENT_ID,
+    });
+
+    await waitFor(() => expect(agent.threadId).toBe("pinned-thread"));
+  });
+
+  it("ends the override when the app picks a thread", async () => {
+    const agent = new TrackingAgent();
+    renderChat(agent, { withControls: true });
+    viewRequest("request-5");
+    await waitFor(() => expect(agent.threadId).toBe("saved-thread"));
+
+    await fireEvent.click(screen.getByText("select"));
+
+    await waitFor(() => expect(agent.threadId).toBe("app-picked"));
+  });
+
+  it("ends the override when the app starts a new thread", async () => {
+    const agent = new TrackingAgent();
+    renderChat(agent, { withControls: true });
+    viewRequest("request-6");
+    await waitFor(() => expect(agent.threadId).toBe("saved-thread"));
+
+    await fireEvent.click(screen.getByText("new"));
+
+    await waitFor(() => expect(agent.threadId).not.toBe("saved-thread"));
+  });
+
+  it("rolls back when connect fails", async () => {
+    const agent = new TrackingAgent();
+    agent.failThreadId = "saved-thread";
+    renderChat(agent, { threadId: "pinned-thread" });
+    const results: boolean[] = [];
+    cleanups.push(
+      onInspectorViewThreadResult((payload) => {
+        if (payload.requestId === "request-7") results.push(payload.ok);
+      }),
+    );
+
+    viewRequest("request-7");
+
+    await waitFor(() => expect(results).toContain(false));
+    await waitFor(() => expect(agent.threadId).toBe("pinned-thread"));
+  });
+
+  it("emits applied result and active-thread on view", async () => {
+    const agent = new TrackingAgent();
+    const results: boolean[] = [];
+    const activeSources: string[] = [];
+    cleanups.push(
+      onInspectorViewThreadResult((payload) => results.push(payload.ok)),
+      onInspectorActiveThread((payload) => activeSources.push(payload.source)),
+    );
+    renderChat(agent, { threadId: "pinned-thread" });
+
+    expect(viewRequest("request-8")).toBe(true);
+
+    await waitFor(() => expect(agent.threadId).toBe("saved-thread"));
+    expect(results).toContain(true);
+    expect(activeSources).toContain("override");
+  });
+});

package/src/v2/providers/keys.ts

@@ -23,3 +23,50 @@ export const CopilotChatConfigurationKey: InjectionKey<
 export const SandboxFunctionsKey: InjectionKey<
   Ref<readonly SandboxFunction[]>
 > = Symbol("SandboxFunctions");
+
+export type VueInspectorOpenRequest = {
+  messageId: string;
+  threadId?: string;
+  agentId?: string;
+  menu?: "event-snippets";
+  snippetId?: string;
+};
+
+export type VueInspectorSaveRequest = {
+  threadId?: string;
+  agentId?: string;
+} & (
+  | {
+      kind: "text";
+      messageId: string;
+      content: string;
+    }
+  | {
+      kind: "reasoning";
+      messageId: string;
+      content: string;
+    }
+  | {
+      kind: "tool-call";
+      messageId: string;
+      toolCallId: string;
+      toolName: string;
+      argsJson: string | Record<string, unknown>;
+    }
+  | {
+      kind: "activity";
+      messageId: string;
+      activityType: string;
+      content: unknown;
+    }
+);
+
+export type VueInspectorContextValue = {
+  isLocalInspectorEnabled: ComputedRef<boolean>;
+  openInspector: (request: VueInspectorOpenRequest) => void;
+  saveEventSnippet: (request: VueInspectorSaveRequest) => Promise<void>;
+};
+
+export const InspectorKey: InjectionKey<VueInspectorContextValue> = Symbol(
+  "CopilotKitInspector",
+);

package/src/v2/providers/types.ts

@@ -8,6 +8,9 @@ export const CopilotChatDefaultLabels = {
   assistantMessageToolbarCopyCodeLabel: "Copy",
   assistantMessageToolbarCopyCodeCopiedLabel: "Copied",
   assistantMessageToolbarCopyMessageLabel: "Copy",
+  assistantMessageToolbarInspectorLabel: "View in Inspector",
+  assistantMessageToolbarInspectorLocalOnlyLabel: "Local Only",
+  assistantMessageToolbarSaveSnippetLabel: "Save as snippet",
   assistantMessageToolbarThumbsUpLabel: "Good response",
   assistantMessageToolbarThumbsDownLabel: "Bad response",
   assistantMessageToolbarReadAloudLabel: "Read aloud",