@copilotkit/vue 1.68.3 → 1.69.1

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

@@ -20,6 +20,7 @@ import {
   useSlots,
   watch,
 } from "vue";
+import { CopilotKitCoreErrorCode } from "@copilotkit/core";
 import type { Suggestion } from "@copilotkit/core";
 import CopilotChatConfigurationProvider from "../../providers/CopilotChatConfigurationProvider.vue";
 import { useCopilotChatConfiguration } from "../../providers/useCopilotChatConfiguration";
@@ -39,6 +40,7 @@ import { LastUserMessageKey } from "./last-user-message-context";
 import type { LastUserMessageState } from "./last-user-message-context";
 import type { Message } from "@ag-ui/core";
 import type { InputContent } from "@copilotkit/shared";
+import { useInspectorThreadOverride } from "../../providers/use-inspector-thread-override";
 import type {
   CopilotChatInputSlotProps,
   CopilotChatProps,
@@ -105,6 +107,7 @@ type ActiveConnectCycle = {
   core: object;
   agent: AbstractAgent;
   threadId: string;
+  inspectorRequestId: string | null;
   abortController: AbortController;
   detached: boolean;
 };
@@ -122,16 +125,27 @@ const resolvedAgentId = computed(
 const providedThreadId = computed(
   () => props.threadId ?? existingConfig.value?.threadId,
 );
-const resolvedThreadId = computed(
+const baseThreadId = computed(
   () => providedThreadId.value ?? generatedThreadId.value,
 );
 // "Explicit" means the caller actually picked this thread — via the
 // `threadId` prop on CopilotChat or a wrapping provider that flagged its
 // threadId as caller-chosen. An auto-minted UUID leaking down through a
 // CopilotChatConfigurationProvider does NOT count.
-const hasExplicitThreadId = computed(
+const baseHasExplicitThreadId = computed(
   () => !!props.threadId || !!existingConfig.value?.hasExplicitThreadId,
 );
+const { inspectorThreadId, inspectorRequestId, failInspectorOverride } =
+  useInspectorThreadOverride({
+    agentId: resolvedAgentId,
+    baseThreadId,
+  });
+const resolvedThreadId = computed(
+  () => inspectorThreadId.value ?? baseThreadId.value,
+);
+const hasExplicitThreadId = computed(
+  () => inspectorThreadId.value !== null || baseHasExplicitThreadId.value,
+);
 const lastConnectedThreadId = ref<string | null>(null);
 const isConnecting = computed(
   () =>
@@ -297,6 +311,28 @@ watch(
   { immediate: true },
 );
 
+watch(
+  [
+    () => copilotkit.value,
+    resolvedAgentId,
+    resolvedThreadId,
+    inspectorRequestId,
+  ],
+  ([core, agentId, threadId, requestId], _old, onCleanup) => {
+    if (!requestId) return;
+    const subscription = core.subscribe({
+      onError: (event) => {
+        if (event.code !== CopilotKitCoreErrorCode.AGENT_CONNECT_FAILED) return;
+        if (event.context?.agentId !== agentId) return;
+        if (event.context?.threadId !== threadId) return;
+        failInspectorOverride(requestId);
+      },
+    });
+    onCleanup(() => subscription.unsubscribe());
+  },
+  { immediate: true },
+);
+
 watch(
   [
     isMounted,
@@ -304,8 +340,13 @@ watch(
     () => agent.value,
     resolvedThreadId,
     hasExplicitThreadId,
+    inspectorRequestId,
   ],
-  ([mounted, core, currentAgent, threadId, isExplicit], _old, onCleanup) => {
+  (
+    [mounted, core, currentAgent, threadId, isExplicit, requestId],
+    _old,
+    onCleanup,
+  ) => {
     if (!mounted) {
       return;
     }
@@ -316,6 +357,20 @@ watch(
       return;
     }
 
+    const previousCycle = activeConnectCycle.value;
+    const inspectorTransition =
+      previousCycle !== null &&
+      previousCycle.threadId !== threadId &&
+      previousCycle.inspectorRequestId !== requestId &&
+      (previousCycle.inspectorRequestId !== null || requestId !== null);
+    if (inspectorTransition) {
+      try {
+        core.stopAgent({ agent: currentAgent });
+      } catch {
+        // No live run to stop.
+      }
+    }
+
     // Pin the thread this chat renders onto its agent, before anything issues a
     // request. `CopilotKitCore.connectAgent` reads `agent.threadId` synchronously
     // to decide whether this is a fresh restore, so a later assignment would let
@@ -357,7 +412,8 @@ watch(
       existingCycle &&
       existingCycle.core === (core as object) &&
       existingCycle.agent === currentAgent &&
-      existingCycle.threadId === threadId;
+      existingCycle.threadId === threadId &&
+      existingCycle.inspectorRequestId === requestId;
 
     let cycle: ActiveConnectCycle;
     if (hasSameDeps && existingCycle) {
@@ -372,6 +428,7 @@ watch(
         core: core as object,
         agent: currentAgent,
         threadId,
+        inspectorRequestId: requestId,
         abortController: connectAbortController,
         detached: false,
       };
@@ -387,6 +444,9 @@ watch(
             return;
           }
           console.error("CopilotChat: connectAgent failed", error);
+          if (requestId) {
+            failInspectorOverride(requestId);
+          }
         })
         .finally(() => {
           // Whether the connect succeeded or failed, we're no longer in

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

@@ -4,6 +4,7 @@ import {
   defineComponent,
   getCurrentInstance,
   h,
+  inject,
   onBeforeUnmount,
   onMounted,
   ref,
@@ -13,6 +14,7 @@ import { StreamMarkdown } from "streamdown-vue";
 import { useCopilotChatConfiguration } from "../../providers/useCopilotChatConfiguration";
 import { CopilotChatDefaultLabels } from "../../providers/types";
 import {
+  IconBookmark,
   IconCheck,
   IconCopy,
   IconDownload,
@@ -34,6 +36,7 @@ import type {
   CopilotChatAssistantMessageToolbarSlotProps,
 } from "./types";
 import { useKatexStyles } from "../../hooks/use-katex-styles";
+import { InspectorKey } from "../../providers/keys";
 
 useKatexStyles();
 
@@ -88,6 +91,10 @@ 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;
@@ -661,10 +668,31 @@ const isLatestAssistantMessage = computed(
 const shouldShowToolbar = computed(
   () =>
     props.toolbarVisible &&
-    hasContent.value &&
+    (hasContent.value || isLocalInspectorEnabled.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);
@@ -814,6 +842,29 @@ 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, ref, useSlots, watch } from "vue";
+import { computed, inject, ref, useSlots, watch } from "vue";
 import type { Component } from "vue";
 import type {
   ActivityMessage,
@@ -19,6 +19,9 @@ 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;
@@ -38,6 +41,23 @@ 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 = {
@@ -414,28 +434,42 @@ function resolveToolMessage(
         />
       </slot>
 
-      <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>
+      <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-if="componentSlots['message-after']"

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

@@ -1,8 +1,11 @@
 <script setup lang="ts">
-import { computed, onBeforeUnmount, ref, watch } from "vue";
+import { computed, inject, onBeforeUnmount, ref, watch } from "vue";
 import type { Message, ReasoningMessage } from "@ag-ui/core";
 import { StreamMarkdown } from "streamdown-vue";
-import { IconChevronRight } from "../icons";
+import { IconBookmark, IconChevronRight } from "../icons";
+import { InspectorKey } from "../../providers/keys";
+import { useCopilotChatConfiguration } from "../../providers/useCopilotChatConfiguration";
+import { CopilotChatDefaultLabels } from "../../providers/types";
 
 const props = withDefaults(
   defineProps<{
@@ -139,6 +142,27 @@ 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>
@@ -169,41 +193,53 @@ function toggleOpen() {
         },
       }"
     >
-      <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"
+      <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"
         >
-          <span class="cpk:font-medium">{{ label }}</span>
-          <span
-            v-if="isStreaming && !hasContent"
-            class="cpk:inline-flex cpk:items-center cpk:ml-1"
+          <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
-              class="cpk:w-1.5 cpk:h-1.5 cpk:rounded-full cpk:bg-muted-foreground cpk:animate-pulse"
+              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 }"
             />
-          </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>
+        </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]" />
         </button>
-      </slot>
+      </div>
 
       <slot
         name="toggle"

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

@@ -0,0 +1,86 @@
+<script setup lang="ts">
+import type { Message, ToolCall } from "@ag-ui/core";
+import { DEFAULT_AGENT_ID } from "@copilotkit/shared";
+import { useCopilotKit } from "../../providers/useCopilotKit";
+import { useCopilotChatConfiguration } from "../../providers/useCopilotChatConfiguration";
+import type { CopilotChatToolCallRenderSlotProps } from "./types";
+import {
+  getCoreRenderConfig,
+  getCoreRenderProps,
+  getToolCallMemoDeps,
+  getToolCallRenderProps,
+  getToolCallSlotName,
+} from "./copilotChatToolCallItemRender";
+
+const props = withDefaults(
+  defineProps<{
+    toolCall: ToolCall;
+    messages?: Message[];
+  }>(),
+  {
+    messages: () => [],
+  },
+);
+
+defineSlots<{
+  "tool-call"?: (props: CopilotChatToolCallRenderSlotProps) => unknown;
+  [key: `tool-call-${string}`]: (
+    props: CopilotChatToolCallRenderSlotProps,
+  ) => unknown;
+}>();
+
+const { copilotkit, executingToolCallIds } = useCopilotKit();
+const config = useCopilotChatConfiguration();
+
+function getRenderProps(): CopilotChatToolCallRenderSlotProps {
+  return getToolCallRenderProps(
+    props.toolCall,
+    props.messages,
+    executingToolCallIds.value,
+  );
+}
+
+function getCoreProps() {
+  return getCoreRenderProps(
+    props.toolCall,
+    props.messages,
+    executingToolCallIds.value,
+  );
+}
+
+function getRenderConfig() {
+  const agentId = config.value?.agentId ?? DEFAULT_AGENT_ID;
+  return getCoreRenderConfig(
+    props.toolCall,
+    copilotkit.value.renderToolCalls,
+    agentId,
+  );
+}
+
+function getMemoDeps() {
+  const agentId = config.value?.agentId ?? DEFAULT_AGENT_ID;
+  return getToolCallMemoDeps(
+    props.toolCall,
+    props.messages,
+    executingToolCallIds.value,
+    copilotkit.value.renderToolCalls,
+    agentId,
+  );
+}
+</script>
+
+<template>
+  <slot
+    :name="getToolCallSlotName(toolCall.function.name)"
+    v-bind="getRenderProps()"
+  >
+    <slot name="tool-call" v-bind="getRenderProps()">
+      <component
+        :is="getRenderConfig()?.render"
+        v-if="getRenderConfig()"
+        v-memo="getMemoDeps()"
+        v-bind="getCoreProps()"
+      />
+    </slot>
+  </slot>
+</template>