@copilotkit/vue 1.69.1 → 1.69.2

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.vue

@@ -34,8 +34,7 @@ import {
   MCPAppsActivityRenderer,
   MCPAppsActivityType,
 } from "../components/MCPAppsActivityRenderer";
-import { CopilotKitKey, InspectorKey, SandboxFunctionsKey } from "./keys";
-import type { VueInspectorOpenRequest, VueInspectorSaveRequest } from "./keys";
+import { CopilotKitKey, SandboxFunctionsKey } from "./keys";
 import {
   LicenseContextKey,
   createLicenseContextValue,
@@ -110,86 +109,28 @@ 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") {
-    shouldRenderInspector.value = isLocalhost;
-    if (!isLocalhost) {
-      canShowLocalInspectorAction.value = false;
+    if (typeof window === "undefined") {
+      shouldRenderInspector.value = false;
+      return;
     }
+    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;
@@ -716,7 +657,6 @@ 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/keys.ts

@@ -23,50 +23,3 @@ 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,9 +8,6 @@ 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",