@copilotkit/vue 1.69.1 → 1.69.3

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

@@ -4,7 +4,6 @@ import {
   defineComponent,
   getCurrentInstance,
   h,
-  inject,
   onBeforeUnmount,
   onMounted,
   ref,
@@ -14,7 +13,6 @@ import { StreamMarkdown } from "streamdown-vue";
 import { useCopilotChatConfiguration } from "../../providers/useCopilotChatConfiguration";
 import { CopilotChatDefaultLabels } from "../../providers/types";
 import {
-  IconBookmark,
   IconCheck,
   IconCopy,
   IconDownload,
@@ -36,7 +34,6 @@ import type {
   CopilotChatAssistantMessageToolbarSlotProps,
 } from "./types";
 import { useKatexStyles } from "../../hooks/use-katex-styles";
-import { InspectorKey } from "../../providers/keys";
 
 useKatexStyles();
 
@@ -91,10 +88,6 @@ const emit = defineEmits<{
 
 const config = useCopilotChatConfiguration();
 const labels = computed(() => config.value?.labels ?? CopilotChatDefaultLabels);
-const inspector = inject(InspectorKey, null);
-const isLocalInspectorEnabled = computed(
-  () => inspector?.isLocalInspectorEnabled.value === true,
-);
 const instance = getCurrentInstance();
 const copied = ref(false);
 let copiedResetTimeout: ReturnType<typeof setTimeout> | null = null;
@@ -668,31 +661,10 @@ const isLatestAssistantMessage = computed(
 const shouldShowToolbar = computed(
   () =>
     props.toolbarVisible &&
-    (hasContent.value || isLocalInspectorEnabled.value) &&
+    hasContent.value &&
     !(props.isRunning && isLatestAssistantMessage.value),
 );
 
-function handleViewInspector() {
-  inspector?.openInspector({
-    messageId: props.message.id,
-    threadId: config.value?.threadId,
-    agentId: config.value?.agentId,
-  });
-}
-
-function handleSaveSnippet() {
-  if (!hasContent.value) {
-    return;
-  }
-  void inspector?.saveEventSnippet({
-    kind: "text",
-    messageId: props.message.id,
-    content: props.message.content ?? "",
-    threadId: config.value?.threadId,
-    agentId: config.value?.agentId,
-  });
-}
-
 function resetCopiedStateWithDelay() {
   if (copiedResetTimeout) {
     clearTimeout(copiedResetTimeout);
@@ -842,29 +814,6 @@ onBeforeUnmount(() => {
               </button>
             </slot>
 
-            <button
-              v-if="isLocalInspectorEnabled"
-              data-testid="copilot-inspector-button"
-              type="button"
-              :class="toolbarButtonClass"
-              :aria-label="`${labels.assistantMessageToolbarInspectorLabel} (${labels.assistantMessageToolbarInspectorLocalOnlyLabel})`"
-              :title="`${labels.assistantMessageToolbarInspectorLabel} (${labels.assistantMessageToolbarInspectorLocalOnlyLabel})`"
-              @click="handleViewInspector"
-            >
-              I
-            </button>
-            <button
-              v-if="isLocalInspectorEnabled && hasContent"
-              data-testid="copilot-save-snippet-button"
-              type="button"
-              :class="toolbarButtonClass"
-              :aria-label="`${labels.assistantMessageToolbarSaveSnippetLabel} (${labels.assistantMessageToolbarInspectorLocalOnlyLabel})`"
-              :title="`${labels.assistantMessageToolbarSaveSnippetLabel} (${labels.assistantMessageToolbarInspectorLocalOnlyLabel})`"
-              @click="handleSaveSnippet"
-            >
-              <IconBookmark class="cpk:size-[18px]" />
-            </button>
-
             <slot
               v-if="hasThumbsUp"
               name="thumbs-up-button"

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

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, inject, ref, useSlots, watch } from "vue";
+import { computed, ref, useSlots, watch } from "vue";
 import type { Component } from "vue";
 import type {
   ActivityMessage,
@@ -19,9 +19,6 @@ import { useCopilotChatConfiguration } from "../../providers/useCopilotChatConfi
 import CopilotChatAssistantMessage from "./CopilotChatAssistantMessage.vue";
 import CopilotChatReasoningMessage from "./CopilotChatReasoningMessage.vue";
 import CopilotChatUserMessage from "./CopilotChatUserMessage.vue";
-import { InspectorKey } from "../../providers/keys";
-import { IconBookmark } from "../icons";
-import SaveSnippetBeside from "./SaveSnippetBeside.vue";
 
 interface MessageMetaProps {
   message: Message;
@@ -41,23 +38,6 @@ interface ActivitySlotProps {
   agent: unknown;
 }
 
-const inspector = inject(InspectorKey, null);
-const canSaveActivity = (message: ActivityMessage) =>
-  inspector?.isLocalInspectorEnabled.value === true &&
-  (message.activityType === "a2ui-surface" ||
-    message.activityType === "open-generative-ui");
-
-function saveActivitySnippet(message: ActivityMessage) {
-  void inspector?.saveEventSnippet({
-    kind: "activity",
-    messageId: message.id,
-    activityType: message.activityType,
-    content: message.content,
-    threadId: config.value?.threadId,
-    agentId: config.value?.agentId,
-  });
-}
-
 type InterruptSlotProps = InterruptRenderProps<unknown, unknown>;
 type CustomMessagePosition = VueCustomMessageRendererProps["position"];
 type ResolvedCustomMessageRenderer = {
@@ -434,42 +414,28 @@ function resolveToolMessage(
         />
       </slot>
 
-      <div v-else-if="message.role === 'activity'">
-        <SaveSnippetBeside :enabled="canSaveActivity(message)">
-          <slot
-            :name="getActivitySlotName(message.activityType)"
-            :activity-type="message.activityType"
-            :content="message.content"
-            :message="message"
-            :agent="resolvedThreadAgent"
-          >
-            <slot
-              name="activity-message"
-              :activity-type="message.activityType"
-              :content="message.content"
-              :message="message"
-              :agent="resolvedThreadAgent"
-            >
-              <component
-                v-if="resolveActivityRenderer(message)"
-                :is="resolveActivityRenderer(message)!.renderer"
-                v-bind="resolveActivityRenderer(message)!.props"
-              />
-            </slot>
-          </slot>
-          <template #save>
-            <button
-              type="button"
-              class="cpk:inline-flex cpk:h-8 cpk:w-8 cpk:items-center cpk:justify-center cpk:rounded-md cpk:p-0 cpk:text-[rgb(93,93,93)] cpk:hover:bg-[#E8E8E8] cpk:dark:text-[rgb(243,243,243)] cpk:dark:hover:bg-[#303030]"
-              data-testid="copilot-activity-save-snippet-button"
-              :aria-label="`${config?.labels.assistantMessageToolbarSaveSnippetLabel ?? 'Save as snippet'} (Local Only)`"
-              @click="saveActivitySnippet(message)"
-            >
-              <IconBookmark class="cpk:size-[18px]" />
-            </button>
-          </template>
-        </SaveSnippetBeside>
-      </div>
+      <slot
+        v-else-if="message.role === 'activity'"
+        :name="getActivitySlotName(message.activityType)"
+        :activity-type="message.activityType"
+        :content="message.content"
+        :message="message"
+        :agent="resolvedThreadAgent"
+      >
+        <slot
+          name="activity-message"
+          :activity-type="message.activityType"
+          :content="message.content"
+          :message="message"
+          :agent="resolvedThreadAgent"
+        >
+          <component
+            v-if="resolveActivityRenderer(message)"
+            :is="resolveActivityRenderer(message)!.renderer"
+            v-bind="resolveActivityRenderer(message)!.props"
+          />
+        </slot>
+      </slot>
 
       <slot
         v-if="componentSlots['message-after']"

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

@@ -1,11 +1,8 @@
 <script setup lang="ts">
-import { computed, inject, onBeforeUnmount, ref, watch } from "vue";
+import { computed, onBeforeUnmount, ref, watch } from "vue";
 import type { Message, ReasoningMessage } from "@ag-ui/core";
 import { StreamMarkdown } from "streamdown-vue";
-import { IconBookmark, IconChevronRight } from "../icons";
-import { InspectorKey } from "../../providers/keys";
-import { useCopilotChatConfiguration } from "../../providers/useCopilotChatConfiguration";
-import { CopilotChatDefaultLabels } from "../../providers/types";
+import { IconChevronRight } from "../icons";
 
 const props = withDefaults(
   defineProps<{
@@ -142,27 +139,6 @@ function toggleOpen() {
   userToggledDuringStreaming.value = true;
   isOpen.value = !isOpen.value;
 }
-
-const inspector = inject(InspectorKey, null);
-const chatConfiguration = useCopilotChatConfiguration();
-const canSaveReasoning = computed(
-  () => inspector?.isLocalInspectorEnabled.value === true && hasContent.value,
-);
-const saveLabel = computed(
-  () =>
-    chatConfiguration.value?.labels.assistantMessageToolbarSaveSnippetLabel ??
-    CopilotChatDefaultLabels.assistantMessageToolbarSaveSnippetLabel,
-);
-
-function saveReasoningSnippet() {
-  void inspector?.saveEventSnippet({
-    kind: "reasoning",
-    messageId: props.message.id,
-    content: normalizedContent.value,
-    threadId: chatConfiguration.value?.threadId,
-    agentId: chatConfiguration.value?.agentId,
-  });
-}
 </script>
 
 <template>
@@ -193,53 +169,41 @@ function saveReasoningSnippet() {
         },
       }"
     >
-      <div class="cpk:flex cpk:items-center cpk:gap-1">
-        <slot
-          name="header"
-          :is-open="isOpen"
-          :label="label"
-          :has-content="hasContent"
-          :is-streaming="isStreaming"
-          :on-click="hasContent ? toggleOpen : undefined"
+      <slot
+        name="header"
+        :is-open="isOpen"
+        :label="label"
+        :has-content="hasContent"
+        :is-streaming="isStreaming"
+        :on-click="hasContent ? toggleOpen : undefined"
+      >
+        <button
+          type="button"
+          class="cpk:inline-flex cpk:items-center cpk:gap-1 cpk:py-1 cpk:text-sm cpk:text-muted-foreground cpk:transition-colors cpk:select-none"
+          :class="
+            hasContent
+              ? 'cpk:hover:text-foreground cpk:cursor-pointer'
+              : 'cpk:cursor-default'
+          "
+          :aria-expanded="hasContent ? isOpen : undefined"
+          @click="hasContent ? toggleOpen() : undefined"
         >
-          <button
-            type="button"
-            class="cpk:inline-flex cpk:items-center cpk:gap-1 cpk:py-1 cpk:text-sm cpk:text-muted-foreground cpk:transition-colors cpk:select-none"
-            :class="
-              hasContent
-                ? 'cpk:hover:text-foreground cpk:cursor-pointer'
-                : 'cpk:cursor-default'
-            "
-            :aria-expanded="hasContent ? isOpen : undefined"
-            @click="hasContent ? toggleOpen() : undefined"
+          <span class="cpk:font-medium">{{ label }}</span>
+          <span
+            v-if="isStreaming && !hasContent"
+            class="cpk:inline-flex cpk:items-center cpk:ml-1"
           >
-            <span class="cpk:font-medium">{{ label }}</span>
             <span
-              v-if="isStreaming && !hasContent"
-              class="cpk:inline-flex cpk:items-center cpk:ml-1"
-            >
-              <span
-                class="cpk:w-1.5 cpk:h-1.5 cpk:rounded-full cpk:bg-muted-foreground cpk:animate-pulse"
-              />
-            </span>
-            <IconChevronRight
-              v-if="hasContent"
-              class="cpk:size-3.5 cpk:shrink-0 cpk:transition-transform cpk:duration-200"
-              :class="{ 'cpk:rotate-90': isOpen }"
+              class="cpk:w-1.5 cpk:h-1.5 cpk:rounded-full cpk:bg-muted-foreground cpk:animate-pulse"
             />
-          </button>
-        </slot>
-        <button
-          v-if="canSaveReasoning"
-          type="button"
-          class="cpk:inline-flex cpk:h-8 cpk:w-8 cpk:items-center cpk:justify-center cpk:rounded-md cpk:p-0 cpk:text-[rgb(93,93,93)] cpk:hover:bg-[#E8E8E8] cpk:dark:text-[rgb(243,243,243)] cpk:dark:hover:bg-[#303030]"
-          data-testid="copilot-save-snippet-button"
-          :aria-label="`${saveLabel} (Local Only)`"
-          @click="saveReasoningSnippet"
-        >
-          <IconBookmark class="cpk:size-[18px]" />
+          </span>
+          <IconChevronRight
+            v-if="hasContent"
+            class="cpk:size-3.5 cpk:shrink-0 cpk:transition-transform cpk:duration-200"
+            :class="{ 'cpk:rotate-90': isOpen }"
+          />
         </button>
-      </div>
+      </slot>
 
       <slot
         name="toggle"

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

@@ -1,15 +1,10 @@
 <script setup lang="ts">
-import { inject, useSlots } from "vue";
+import { useSlots } from "vue";
 import type { AssistantMessage, Message } from "@ag-ui/core";
 import type { CopilotChatToolCallRenderSlotProps } from "./types";
 import CopilotChatToolCallItem from "./CopilotChatToolCallItem.vue";
-import SaveSnippetBeside from "./SaveSnippetBeside.vue";
-import { InspectorKey } from "../../providers/keys";
-import { useCopilotChatConfiguration } from "../../providers/useCopilotChatConfiguration";
-import { CopilotChatDefaultLabels } from "../../providers/types";
-import { IconBookmark } from "../icons";
 
-const props = withDefaults(
+withDefaults(
   defineProps<{
     message: AssistantMessage;
     messages?: Message[];
@@ -34,70 +29,21 @@ const componentSlots = useSlots() as Record<
 function getForwardedSlotNames(): ToolCallSlotName[] {
   return Object.keys(componentSlots) as ToolCallSlotName[];
 }
-
-// A streaming tool call has truncated arguments. Do not offer to capture it
-// until the JSON is complete, or the snippet holds a broken partial payload.
-function hasCompleteArgs(args: string | undefined): boolean {
-  const trimmed = (args ?? "").trim();
-  if (!trimmed) {
-    return true;
-  }
-  try {
-    JSON.parse(trimmed);
-    return true;
-  } catch {
-    return false;
-  }
-}
-
-const inspector = inject(InspectorKey, null);
-const chatConfiguration = useCopilotChatConfiguration();
-const canSave = (toolCall: { function: { arguments: string } }) =>
-  inspector?.isLocalInspectorEnabled.value === true &&
-  hasCompleteArgs(toolCall.function.arguments);
-const saveLabel = () =>
-  chatConfiguration.value?.labels.assistantMessageToolbarSaveSnippetLabel ??
-  CopilotChatDefaultLabels.assistantMessageToolbarSaveSnippetLabel;
-
-function saveToolCall(toolCall: {
-  id: string;
-  function: { name: string; arguments: string };
-}) {
-  void inspector?.saveEventSnippet({
-    kind: "tool-call",
-    messageId: props.message.id,
-    toolCallId: toolCall.id,
-    toolName: toolCall.function.name,
-    argsJson: toolCall.function.arguments || "{}",
-    threadId: chatConfiguration.value?.threadId,
-    agentId: chatConfiguration.value?.agentId,
-  });
-}
 </script>
 
 <template>
-  <div v-for="toolCall in message.toolCalls ?? []" :key="toolCall.id">
-    <SaveSnippetBeside :enabled="canSave(toolCall)">
-      <CopilotChatToolCallItem :tool-call="toolCall" :messages="messages">
-        <template
-          v-for="slotName in getForwardedSlotNames()"
-          :key="slotName"
-          #[slotName]="slotProps"
-        >
-          <slot :name="slotName" v-bind="slotProps ?? {}" />
-        </template>
-      </CopilotChatToolCallItem>
-      <template #save>
-        <button
-          type="button"
-          class="cpk:inline-flex cpk:h-8 cpk:w-8 cpk:items-center cpk:justify-center cpk:rounded-md cpk:p-0 cpk:text-[rgb(93,93,93)] cpk:hover:bg-[#E8E8E8] cpk:dark:text-[rgb(243,243,243)] cpk:dark:hover:bg-[#303030]"
-          data-testid="copilot-tool-save-snippet-button"
-          :aria-label="`${saveLabel()} (Local Only)`"
-          @click="saveToolCall(toolCall)"
-        >
-          <IconBookmark class="cpk:size-[18px]" />
-        </button>
-      </template>
-    </SaveSnippetBeside>
-  </div>
+  <CopilotChatToolCallItem
+    v-for="toolCall in message.toolCalls ?? []"
+    :key="toolCall.id"
+    :tool-call="toolCall"
+    :messages="messages"
+  >
+    <template
+      v-for="slotName in getForwardedSlotNames()"
+      :key="slotName"
+      #[slotName]="slotProps"
+    >
+      <slot :name="slotName" v-bind="slotProps ?? {}" />
+    </template>
+  </CopilotChatToolCallItem>
 </template>

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

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

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

@@ -5,7 +5,6 @@ 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/providers/CopilotKitProvider.types.ts

@@ -37,7 +37,17 @@ export interface CopilotKitProviderProps {
     sandboxFunctions?: SandboxFunction[];
     designSkill?: string;
   };
+  /**
+   * @deprecated This prop no longer controls the Inspector. Use
+   * `enableInspector` instead.
+   */
   showDevConsole?: boolean | "auto";
+  /**
+   * Disable the CopilotKit Inspector in development.
+   * The Inspector is enabled by default in development browser builds and is
+   * always disabled in production and during server rendering.
+   */
+  enableInspector?: boolean;
   onError?: (event: {
     error: Error;
     code: CopilotKitCoreErrorCode;
@@ -49,15 +59,6 @@ export interface CopilotKitProviderProps {
     loadingComponent?: Component;
     includeSchema?: boolean;
   };
-  /**
-   * Default anchor corner for the inspector button and window.
-   * Only used on first load before the user drags to a custom position.
-   * Defaults to `{ horizontal: "right", vertical: "top" }`.
-   */
-  inspectorDefaultAnchor?: {
-    horizontal: "left" | "right";
-    vertical: "top" | "bottom";
-  };
   /**
    * Enable debug logging for the client-side event pipeline.
    *

package/src/v2/providers/CopilotKitProvider.vue

@@ -15,7 +15,7 @@ import type {
   CopilotKitCoreSubscriber,
   FrontendTool,
 } from "@copilotkit/core";
-import { schemaToJsonSchema } from "@copilotkit/shared";
+import { schemaToJsonSchema, shouldEnableInspector } from "@copilotkit/shared";
 import type { RuntimeLicenseStatus } from "@copilotkit/shared";
 import { zodToJsonSchema } from "zod-to-json-schema";
 import { CopilotKitCoreVue } from "../lib/vue-core";
@@ -35,7 +35,7 @@ import {
   MCPAppsActivityType,
 } from "../components/MCPAppsActivityRenderer";
 import { CopilotKitKey, InspectorKey, SandboxFunctionsKey } from "./keys";
-import type { VueInspectorOpenRequest, VueInspectorSaveRequest } from "./keys";
+import type { VueInspectorOpenRequest } from "./keys";
 import {
   LicenseContextKey,
   createLicenseContextValue,
@@ -54,7 +54,6 @@ import type {
 
 const HEADER_NAME = "X-CopilotCloud-Public-Api-Key";
 const COPILOT_CLOUD_CHAT_URL = "https://api.cloud.copilotkit.ai/copilotkit/v1";
-
 // Canonical A2UI viewer theme default (matches @copilotkit/a2ui-renderer).
 // Defined locally to avoid pulling React dependencies from a2ui-renderer.
 const viewerTheme: Record<string, unknown> = {};
@@ -104,90 +103,34 @@ const props = withDefaults(defineProps<CopilotKitProviderProps>(), {
   renderCustomMessages: () => [],
   renderActivityMessages: () => [],
   openGenerativeUI: undefined,
-  showDevConsole: false,
   useSingleEndpoint: undefined,
   a2ui: undefined,
+  enableInspector: undefined,
 });
 
 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") {
-    shouldRenderInspector.value = isLocalhost;
-    if (!isLocalhost) {
-      canShowLocalInspectorAction.value = false;
-    }
-    return;
-  }
-  shouldRenderInspector.value = false;
-  canShowLocalInspectorAction.value = false;
-};
 
-watch(() => props.showDevConsole, updateInspectorVisibility, {
-  immediate: true,
-});
+function updateInspectorVisibility(): void {
+  shouldRenderInspector.value = shouldEnableInspector({
+    enableInspector: props.enableInspector,
+    isBrowser: true,
+    isDevelopment: process.env.NODE_ENV === "development",
+  });
+}
+
+onMounted(updateInspectorVisibility);
+watch(() => props.enableInspector, updateInspectorVisibility);
 
 const inspectorOpenRequest = ref<VueInspectorOpenRequest | null>(null);
-const isLocalInspectorEnabled = computed(
-  () => shouldRenderInspector.value && canShowLocalInspectorAction.value,
-);
+const isInspectorEnabled = computed(() => shouldRenderInspector.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,
+  isInspectorEnabled,
   openInspector,
-  saveEventSnippet,
 });
 
 const initialFrontendTools = props.frontendTools;
@@ -715,7 +658,6 @@ const showExpiringBanner = computed(
   <CopilotKitInspector
     v-if="shouldRenderInspector"
     :core="copilotkit"
-    :default-anchor="props.inspectorDefaultAnchor"
     :open-request="inspectorOpenRequest"
   />
   <!-- License warnings — driven by server-reported status -->