@copilotkit/vue 1.69.0 → 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/CopilotChatToolCallsView.vue

@@ -1,10 +1,15 @@
 <script setup lang="ts">
-import { useSlots } from "vue";
+import { inject, 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";
 
-withDefaults(
+const props = withDefaults(
   defineProps<{
     message: AssistantMessage;
     messages?: Message[];
@@ -29,21 +34,70 @@ 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>
-  <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>
+  <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>
 </template>

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

@@ -0,0 +1,82 @@
+<script setup lang="ts">
+import { onBeforeUnmount, onMounted, ref, watch } from "vue";
+import {
+  SAVE_SNIPPET_BESIDE_BODY_CLASS,
+  SAVE_SNIPPET_BESIDE_SAVE_CLASS,
+  SAVE_SNIPPET_BESIDE_WRAP_CLASS,
+  findOverflowAncestor,
+  measureSaveSnippetSide,
+  saveSnippetBesideStyle,
+} from "./save-snippet-beside";
+
+const props = defineProps<{
+  enabled: boolean;
+}>();
+
+const wrapRef = ref<HTMLElement | null>(null);
+const bodyRef = ref<HTMLElement | null>(null);
+const side = ref<"left" | "right">("right");
+let observer: ResizeObserver | undefined;
+
+function measure() {
+  const wrap = wrapRef.value;
+  const body = bodyRef.value;
+  if (!props.enabled || !wrap || !body) {
+    return;
+  }
+  side.value = measureSaveSnippetSide(wrap, body);
+}
+
+function bindObserver() {
+  observer?.disconnect();
+  const wrap = wrapRef.value;
+  const body = bodyRef.value;
+  if (!props.enabled || !wrap || !body) {
+    return;
+  }
+  measure();
+  if (typeof ResizeObserver === "undefined") {
+    return;
+  }
+  observer = new ResizeObserver(measure);
+  observer.observe(wrap);
+  observer.observe(body);
+  const clip = findOverflowAncestor(wrap);
+  if (clip !== wrap) {
+    observer.observe(clip);
+  }
+}
+
+onMounted(() => {
+  watch([wrapRef, bodyRef, () => props.enabled], () => bindObserver(), {
+    flush: "post",
+    immediate: true,
+  });
+  window.addEventListener("resize", measure);
+});
+
+onBeforeUnmount(() => {
+  observer?.disconnect();
+  window.removeEventListener("resize", measure);
+});
+</script>
+
+<template>
+  <slot v-if="!enabled" />
+  <div
+    v-else
+    ref="wrapRef"
+    :class="SAVE_SNIPPET_BESIDE_WRAP_CLASS"
+    :data-save-snippet-side="side"
+  >
+    <div ref="bodyRef" :class="SAVE_SNIPPET_BESIDE_BODY_CLASS">
+      <slot />
+    </div>
+    <div
+      :class="SAVE_SNIPPET_BESIDE_SAVE_CLASS"
+      :style="saveSnippetBesideStyle(side)"
+    >
+      <slot name="save" />
+    </div>
+  </div>
+</template>