@copilotkit/vue 2.0.0-rc.20 → 2.0.0-rc.21

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

@@ -8,6 +8,11 @@ import {
   useAttrs,
   watch,
 } from "vue";
+import {
+  ɵPOPUP_ANIMATION_MS,
+  ɵbindPopupDismiss,
+  ɵdimensionToCss,
+} from "@copilotkit/core";
 import { CopilotChatDefaultLabels } from "../../providers/types";
 import { useCopilotChatConfiguration } from "../../providers/useCopilotChatConfiguration";
 import CopilotChatToggleButton from "./CopilotChatToggleButton.vue";
@@ -32,7 +37,7 @@ defineOptions({ inheritAttrs: false });
 
 const DEFAULT_POPUP_WIDTH = 420;
 const DEFAULT_POPUP_HEIGHT = 560;
-const POPUP_ANIMATION_MS = 200;
+const POPUP_ANIMATION_MS = ɵPOPUP_ANIMATION_MS;
 
 const props = withDefaults(
   defineProps<Omit<CopilotPopupViewProps, "defaultOpen">>(),
@@ -100,7 +105,6 @@ const containerRef = ref<HTMLElement | null>(null);
 const isRendered = ref(config.value?.isModalOpen ?? false);
 const isAnimatingOut = ref(false);
 let animationTimer: ReturnType<typeof setTimeout> | undefined;
-let focusTimer: ReturnType<typeof setTimeout> | undefined;
 
 const isPopupOpen = computed(() => config.value?.isModalOpen ?? false);
 const labels = computed(() => config.value?.labels ?? CopilotChatDefaultLabels);
@@ -113,8 +117,11 @@ const popupAnimationClass = computed(() =>
 const popupStyle = computed(
   () =>
     ({
-      "--copilot-popup-width": dimensionToCss(props.width, DEFAULT_POPUP_WIDTH),
-      "--copilot-popup-height": dimensionToCss(
+      "--copilot-popup-width": ɵdimensionToCss(
+        props.width,
+        DEFAULT_POPUP_WIDTH,
+      ),
+      "--copilot-popup-height": ɵdimensionToCss(
         props.height,
         DEFAULT_POPUP_HEIGHT,
       ),
@@ -127,19 +134,6 @@ const popupStyle = computed(
     }) as Record<string, string>,
 );
 
-function dimensionToCss(
-  value: number | string | undefined,
-  fallback: number,
-): string {
-  if (typeof value === "number" && Number.isFinite(value)) {
-    return `${value}px`;
-  }
-  if (typeof value === "string" && value.trim().length > 0) {
-    return value;
-  }
-  return `${fallback}px`;
-}
-
 function closePopup() {
   config.value?.setModalOpen?.(false);
 }
@@ -246,87 +240,20 @@ watch(
   { immediate: true },
 );
 
-watch(
-  isPopupOpen,
-  (open, _old, onCleanup) => {
-    if (!open || typeof window === "undefined") {
-      return;
-    }
-
-    const handleKeyDown = (event: KeyboardEvent) => {
-      if (event.key === "Escape") {
-        event.preventDefault();
-        closePopup();
-      }
-    };
-
-    window.addEventListener("keydown", handleKeyDown);
-    onCleanup(() => {
-      window.removeEventListener("keydown", handleKeyDown);
-    });
-  },
-  { immediate: true },
-);
-
-watch(
-  isPopupOpen,
-  (open, _old, onCleanup) => {
-    if (!open) {
-      return;
-    }
-
-    focusTimer = setTimeout(() => {
-      if (typeof document === "undefined") {
-        return;
-      }
-      const container = containerRef.value;
-      if (container && !container.contains(document.activeElement)) {
-        container.focus({ preventScroll: true });
-      }
-    }, POPUP_ANIMATION_MS);
-
-    onCleanup(() => {
-      if (focusTimer) {
-        clearTimeout(focusTimer);
-        focusTimer = undefined;
-      }
-    });
-  },
-  { immediate: true },
-);
-
+// Escape, a click outside (when enabled), and focus once the popup opens.
 watch(
   [isPopupOpen, () => props.clickOutsideToClose],
-  ([open, allowClose], _old, onCleanup) => {
-    if (!open || !allowClose || typeof document === "undefined") {
+  ([open, clickOutsideToClose], _old, onCleanup) => {
+    if (!open) {
       return;
     }
-
-    const handlePointerDown = (event: PointerEvent) => {
-      const target = event.target as Node | null;
-      if (!target) {
-        return;
-      }
-
-      const container = containerRef.value;
-      if (container?.contains(target)) {
-        return;
-      }
-
-      const toggleButton = document.querySelector(
-        "[data-slot='chat-toggle-button']",
-      );
-      if (toggleButton?.contains(target)) {
-        return;
-      }
-
-      closePopup();
-    };
-
-    document.addEventListener("pointerdown", handlePointerDown);
-    onCleanup(() => {
-      document.removeEventListener("pointerdown", handlePointerDown);
-    });
+    onCleanup(
+      ɵbindPopupDismiss({
+        getContainer: () => containerRef.value,
+        onDismiss: closePopup,
+        clickOutsideToClose: clickOutsideToClose === true,
+      }),
+    );
   },
   { immediate: true },
 );
@@ -339,9 +266,6 @@ onBeforeUnmount(() => {
   if (animationTimer) {
     clearTimeout(animationTimer);
   }
-  if (focusTimer) {
-    clearTimeout(focusTimer);
-  }
 });
 </script>
 

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

@@ -8,6 +8,8 @@ import {
   useAttrs,
   watch,
 } from "vue";
+import { ɵcreateDockedSidebar, ɵdimensionToCss } from "@copilotkit/core";
+import type { ɵDockedSidebar } from "@copilotkit/core";
 import { CopilotChatDefaultLabels } from "../../providers/types";
 import { useCopilotChatConfiguration } from "../../providers/useCopilotChatConfiguration";
 import CopilotChatToggleButton from "./CopilotChatToggleButton.vue";
@@ -122,32 +124,23 @@ const asideAttrs = computed(() => {
 const asideStyle = computed(
   () =>
     ({
-      "--sidebar-width": widthToCss(resolvedSidebarWidth.value),
+      "--sidebar-width": widthCss.value,
       paddingTop: "env(safe-area-inset-top)",
       paddingBottom: "env(safe-area-inset-bottom)",
     }) as Record<string, string>,
 );
-// The page makes room on the docked edge (desktop only).
-const bodyMarginStyle = computed(() => {
-  const margin =
-    props.position === "left" ? "margin-inline-start" : "margin-inline-end";
-  return `
-@media (min-width: 768px) {
-  body {
-    ${margin}: ${widthToMargin(resolvedSidebarWidth.value)};
-    transition: ${margin} ${SIDEBAR_TRANSITION_MS}ms ease;
-  }
-}
-`;
-});
-
-function widthToCss(width: number | string): string {
-  return typeof width === "number" ? `${width}px` : width;
-}
+const widthCss = computed(() =>
+  ɵdimensionToCss(resolvedSidebarWidth.value, DEFAULT_SIDEBAR_WIDTH),
+);
 
-function widthToMargin(width: number | string): string {
-  return typeof width === "number" ? `${width}px` : width;
-}
+// The page makes room on the docked edge (desktop only).
+let dock: ɵDockedSidebar | undefined;
+watch(
+  [isSidebarOpen, () => props.position, widthCss],
+  ([open, position, width]) => {
+    dock?.set({ open, position, width });
+  },
+);
 
 function updateMeasuredWidth() {
   if (props.width !== undefined || !sidebarRef.value) {
@@ -245,6 +238,14 @@ watch(
 );
 
 onMounted(async () => {
+  dock = ɵcreateDockedSidebar(document, {
+    transitionMs: SIDEBAR_TRANSITION_MS,
+  });
+  dock.set({
+    open: isSidebarOpen.value,
+    position: props.position,
+    width: widthCss.value,
+  });
   await nextTick();
   updateMeasuredWidth();
 
@@ -263,16 +264,14 @@ onMounted(async () => {
 });
 
 onBeforeUnmount(() => {
+  dock?.dispose();
+  dock = undefined;
   resizeObserver?.disconnect();
   resizeObserver = null;
 });
 </script>
 
 <template>
-  <component :is="'style'" v-if="isSidebarOpen">
-    {{ bodyMarginStyle }}
-  </component>
-
   <slot
     name="toggle-button"
     :is-open="isSidebarOpen"

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

@@ -8,7 +8,6 @@ import { computed, onMounted, onScopeDispose, ref, watchEffect } from "vue";
 // below is kept at module scope.
 import type {
   CopilotKitThreadsDrawer as CopilotKitThreadsDrawerElement,
-  DrawerThread,
   ThreadSelectedDetail,
   ArchiveDetail,
   UnarchiveDetail,
@@ -23,6 +22,12 @@ import type {
 // in this worktree predate it.
 type CollapseChangeDetail = { collapsed: boolean };
 import { DEFAULT_AGENT_ID } from "@copilotkit/shared";
+import {
+  ɵcreateThreadsDrawerActions,
+  ɵgetThreadsDrawerElementProps,
+  ɵresolveThreadsLicense,
+  ɵtoDrawerThread,
+} from "@copilotkit/core";
 import { useThreads } from "../../hooks/use-threads";
 import type { Thread } from "../../hooks/use-threads";
 import { useCopilotChatConfiguration } from "../../providers/useCopilotChatConfiguration";
@@ -71,15 +76,11 @@ const emit = defineEmits<{
 const config = useCopilotChatConfiguration();
 const license = useLicenseContext();
 
-const licensed = computed(() => {
-  const status = license.value.status;
-  // `unknown` is an unrecovered retryable entitlement lookup, not a settled
-  // negative: fetch the list and let the threads endpoint decide.
-  if (status === "unknown") return true;
-  const present = status === "valid" || status === "expiring";
-  return present && license.value.checkFeature("threads");
-});
-const licensePending = computed(() => license.value.status === null);
+// `unknown` (an unrecovered entitlement lookup) counts as licensed so the
+// threads endpoint decides; `null` (not reported yet) is pending.
+const threadsLicense = computed(() => ɵresolveThreadsLicense(license.value));
+const licensed = computed(() => threadsLicense.value.licensed);
+const licensePending = computed(() => threadsLicense.value.licensePending);
 
 const resolvedAgentId = computed(
   () => props.agentId ?? config.value?.agentId ?? DEFAULT_AGENT_ID,
@@ -107,18 +108,8 @@ const threadsApi = useThreads({
   limit: () => props.limit,
 });
 
-function toDrawerThread(t: Thread): DrawerThread {
-  return {
-    id: t.id,
-    name: t.name,
-    archived: t.archived,
-    createdAt: t.createdAt,
-    updatedAt: t.updatedAt,
-    ...(t.lastRunAt !== undefined ? { lastRunAt: t.lastRunAt } : {}),
-  };
-}
 const drawerThreads = computed(() =>
-  threadsApi.threads.value.map(toDrawerThread),
+  threadsApi.threads.value.map(ɵtoDrawerThread),
 );
 
 // Client-only element registration (SSR-safe). The element module is imported
@@ -144,10 +135,15 @@ watchEffect(
     const el = elRef.value;
     if (!el) return;
     el.threads = drawerThreads.value;
-    el.loading = threadsApi.isLoading.value || licensePending.value;
+    const elementProps = ɵgetThreadsDrawerElementProps({
+      loading: threadsApi.isLoading.value,
+      licensed: licensed.value,
+      licensePending: licensePending.value,
+    });
+    el.loading = elementProps.loading;
     el.error = threadsApi.listError.value?.message ?? null;
     el.activeThreadId = activeThreadId.value;
-    el.licensed = licensed.value || licensePending.value;
+    el.licensed = elementProps.licensed;
     el.hasMore = threadsApi.hasMoreThreads.value;
     el.fetchingMore = threadsApi.isFetchingMoreThreads.value;
     // Dedicated fetch-more error channel: drives the element's inline
@@ -177,101 +173,40 @@ const unregisterDrawer = config.value?.registerDrawer?.();
 if (unregisterDrawer) onScopeDispose(unregisterDrawer);
 
 // --- Outbound event handlers ------------------------------------------------
-/** The chat input textarea's documented `data-testid`. */
-const CHAT_INPUT_TESTID = "copilot-chat-input-textarea";
-/** The chat view container's documented `data-testid`. */
-const CHAT_CONTAINER_TESTID = "copilot-chat-view";
-
-/**
- * Returns the chat input element for focus-return after a thread is selected.
- *
- * Best-effort and SCOPED: walks up from the drawer's custom element looking
- * for an ancestor that contains a chat-view container
- * (`data-testid="copilot-chat-view"`), then returns the chat input within
- * that subtree. This avoids focusing the wrong composer on a page hosting
- * more than one chat (multi-chat dashboards), where a document-global lookup
- * would grab whichever input appears first in DOM order rather than the one
- * this drawer drives.
- *
- * Falls back to a document-global lookup when no scoping ancestor is found
- * (e.g. the drawer and chat share no common container, or headless usage).
- */
-function findChatInput(origin: Element | null): HTMLElement | null {
-  if (typeof document === "undefined") return null;
-  const container = origin?.closest?.(
-    `[data-testid="${CHAT_CONTAINER_TESTID}"]`,
-  );
-  if (container) {
-    const scoped = container.querySelector<HTMLElement>(
-      `[data-testid="${CHAT_INPUT_TESTID}"]`,
-    );
-    if (scoped) return scoped;
-  }
-  return document.querySelector<HTMLElement>(
-    `[data-testid="${CHAT_INPUT_TESTID}"]`,
-  );
-}
-
-function focusChatInput() {
-  findChatInput(elRef.value)?.focus();
-}
+// Core owns the drawer actions; they read the latest values at call time.
+const actions = ɵcreateThreadsDrawerActions({
+  getThreads: () => threadsApi,
+  getConfig: () => config.value,
+  getCallbacks: () => ({
+    onThreadSelect: props.onThreadSelect,
+    onNewThread: props.onNewThread,
+  }),
+  getElement: () => elRef.value,
+});
 
 function onThreadSelected(event: Event) {
   const { threadId } = (event as CustomEvent<ThreadSelectedDetail>).detail;
-  if (props.onThreadSelect) props.onThreadSelect(threadId);
-  else config.value?.setActiveThreadId?.(threadId, { explicit: true });
-  focusChatInput();
-}
-function handleNewThread() {
-  threadsApi.startNewThread();
-  if (props.onNewThread) props.onNewThread();
-  else config.value?.startNewThread?.();
+  actions.selectThread(threadId);
 }
+const handleNewThread = actions.newThread;
 function onArchive(event: Event) {
-  const { threadId } = (event as CustomEvent<ArchiveDetail>).detail;
-  void threadsApi
-    .archiveThread(threadId)
-    .catch((e) =>
-      console.error("CopilotThreadsDrawer: archiveThread failed", e),
-    );
+  actions.archive((event as CustomEvent<ArchiveDetail>).detail.threadId);
 }
 function onUnarchive(event: Event) {
-  const { threadId } = (event as CustomEvent<UnarchiveDetail>).detail;
-  void threadsApi
-    .unarchiveThread(threadId)
-    .catch((e) =>
-      console.error("CopilotThreadsDrawer: unarchiveThread failed", e),
-    );
+  actions.unarchive((event as CustomEvent<UnarchiveDetail>).detail.threadId);
 }
 function onDelete(event: Event) {
-  const { threadId } = (event as CustomEvent<DeleteDetail>).detail;
-  const wasActive = threadId === activeThreadId.value;
-  void threadsApi
-    .deleteThread(threadId)
-    .then(() => {
-      if (wasActive) {
-        handleNewThread();
-      }
-    })
-    .catch((e) =>
-      console.error("CopilotThreadsDrawer: deleteThread failed", e),
-    );
-}
-function onFilterChange() {
-  threadsApi.refetchThreads();
+  actions.remove((event as CustomEvent<DeleteDetail>).detail.threadId);
 }
+const onFilterChange = actions.refetch;
 function onCollapseChange(event: Event) {
   const { collapsed } = (event as CustomEvent<CollapseChangeDetail>).detail;
   emit("collapse-change", collapsed);
 }
 function onRetry(event: Event) {
-  const { scope } = (event as CustomEvent<RetryDetail>).detail;
-  if (scope === "fetch-more") threadsApi.fetchMoreThreads();
-  else threadsApi.refetchThreads();
-}
-function onLoadMore() {
-  threadsApi.fetchMoreThreads();
+  actions.retry((event as CustomEvent<RetryDetail>).detail.scope);
 }
+const onLoadMore = actions.loadMore;
 function onOpenChange(event: Event) {
   const { open } = (event as CustomEvent<OpenChangeDetail>).detail;
   setDrawerOpen(open);

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

@@ -1,8 +1,10 @@
 <script setup lang="ts">
-import { computed, h, watchEffect } from "vue";
+import { computed, watchEffect } from "vue";
 import { StreamingMarkdownRenderer } from "@copilotkit/markdown/vue";
-import type { VueStreamingMarkdownNodeRenderer } from "@copilotkit/markdown/vue";
-import { warnUnsupportedRichSyntaxOnce } from "@copilotkit/markdown";
+import {
+  CHAT_MARKDOWN_NODE_CLASS_NAMES,
+  warnUnsupportedRichSyntaxOnce,
+} from "@copilotkit/markdown";
 import type { StreamingMarkdownParserOptions } from "@copilotkit/markdown";
 import type { DefaultMarkdownRendererProps } from "../../providers/markdown-renderer";
 
@@ -10,34 +12,15 @@ const props = withDefaults(
   defineProps<
     { content: string; isStreaming?: boolean } & DefaultMarkdownRendererProps
   >(),
-  { isStreaming: false },
+  { isStreaming: false, caret: undefined },
 );
 
+// vue-tsc reads the renderer's `options` prop as the full options type; the
+// renderer itself accepts a partial object.
 const resolvedOptions = computed(
   () => props.options as StreamingMarkdownParserOptions | undefined,
 );
 
-const defaultCodeBlockRenderer: VueStreamingMarkdownNodeRenderer = (
-  node,
-  defaultVNode,
-) => {
-  if (node.type !== "code-block") return defaultVNode;
-  return h(
-    "pre",
-    {
-      "data-streaming-markdown-node": "code-block",
-      "data-node-open": String(!node.closed),
-      class: "cpk-markdown-code-block",
-    },
-    [h("code", { "data-code-info": node.info ?? undefined }, node.text)],
-  );
-};
-
-const mergedNodeRenderers = computed(() => ({
-  codeBlock: defaultCodeBlockRenderer,
-  ...props.nodeRenderers,
-}));
-
 // Dev-only: nudge upgraders from the bundled Streamdown default when their
 // content needs math/syntax highlighting the built-in renderer doesn't do.
 watchEffect(() => warnUnsupportedRichSyntaxOnce(props.content));
@@ -45,11 +28,15 @@ watchEffect(() => warnUnsupportedRichSyntaxOnce(props.content));
 
 <template>
   <StreamingMarkdownRenderer
+    v-if="props.content"
     :content="props.content"
     :is-complete="!props.isStreaming"
-    :node-renderers="mergedNodeRenderers"
+    :node-renderers="props.nodeRenderers"
+    :node-class-names="CHAT_MARKDOWN_NODE_CLASS_NAMES"
     :caret="props.caret ?? props.isStreaming"
     :options="resolvedOptions"
     :class="props.class"
+    :on-link-click="props.onLinkClick"
+    :on-citation-click="props.onCitationClick"
   />
 </template>

package/src/v2/components/chat/__tests__/CopilotChat.test.ts

@@ -60,6 +60,11 @@ describe("CopilotChat", () => {
       }) => void | Promise<void>,
       errorMessage: string,
     ) => Promise<void>;
+    emitError: (params: {
+      error: Error;
+      code: CopilotKitCoreErrorCode;
+      context?: Record<string, unknown>;
+    }) => Promise<void>;
   }
 
   beforeEach(() => {
@@ -405,16 +410,13 @@ describe("CopilotChat", () => {
       },
     });
 
-    await (core as unknown as CopilotKitCoreTestAccess).notifySubscribers(
-      (subscriber) =>
-        subscriber.onError?.({
-          copilotkit: core!,
-          error: new Error("matching agent"),
-          code: CopilotKitCoreErrorCode.AGENT_RUN_FAILED,
-          context: { agentId: "default" },
-        }),
-      "test chat onError",
-    );
+    // Through core's error path: the provider's onError is core's handler,
+    // the chat's is a subscriber.
+    await (core as unknown as CopilotKitCoreTestAccess).emitError({
+      error: new Error("matching agent"),
+      code: CopilotKitCoreErrorCode.AGENT_RUN_FAILED,
+      context: { agentId: "default" },
+    });
 
     await nextTick();
 

package/src/v2/components/chat/__tests__/CopilotChatAttachmentQueue.test.ts

@@ -186,6 +186,34 @@ describe("CopilotChatAttachmentQueue", () => {
     ).toContain("hello attachment preview");
   });
 
+  it("decodes a text document as UTF-8", async () => {
+    const { getByTestId } = render(CopilotChatAttachmentQueue, {
+      props: {
+        attachments: [
+          createAttachment({
+            id: "doc-utf8",
+            type: "document",
+            status: "ready",
+            // "héllo ✓" in UTF-8, base64-encoded.
+            source: {
+              type: "data",
+              value: "aMOpbGxvIOKckw==",
+              mimeType: "text/plain",
+            },
+          }),
+        ],
+      },
+    });
+
+    await fireEvent.click(
+      getByTestId("copilot-chat-attachment-document-button"),
+    );
+    expect(
+      screen.getByTestId("copilot-chat-attachment-lightbox-document-text")
+        .textContent,
+    ).toContain("héllo ✓");
+  });
+
   it("non-previewable document remains inert", async () => {
     const { getByTestId, queryByTestId } = render(CopilotChatAttachmentQueue, {
       props: {

package/src/v2/components/chat/__tests__/CopilotChatInput.test.ts

@@ -128,9 +128,14 @@ beforeEach(() => {
   mockOnSubmitMessage.mockClear();
   vi.spyOn(HTMLCanvasElement.prototype, "getContext").mockImplementation(
     () =>
+      // A partial 2D context: the input measures text, and the recorder's
+      // waveform scales, clears, and fills.
       ({
         measureText: (text: string) => ({ width: text.length * 8 }),
         font: "",
+        scale: () => {},
+        clearRect: () => {},
+        fillRect: () => {},
       }) as unknown as CanvasRenderingContext2D,
   );
 });
@@ -397,6 +402,32 @@ describe("CopilotChatInput", () => {
     });
   });
 
+  it("does not empty the textarea to re-measure it on each keystroke on a phone", async () => {
+    vi.stubGlobal("matchMedia", (query: string) => ({
+      matches: query === "(max-width: 767px)",
+    }));
+    const valueSetter = vi.spyOn(HTMLTextAreaElement.prototype, "value", "set");
+    try {
+      renderWithProvider({
+        listeners: { onSubmitMessage: mockOnSubmitMessage },
+      });
+      const textarea = screen.getByRole("textbox");
+      await fireEvent.input(textarea, { target: { value: "ABCD" } });
+      const grid = textarea.closest("[data-layout]");
+      await waitFor(() => {
+        expect(grid?.getAttribute("data-layout")).toBe("expanded");
+      });
+
+      valueSetter.mockClear();
+      await fireEvent.input(textarea, { target: { value: "AEBCD" } });
+
+      expect(valueSetter).not.toHaveBeenCalledWith("");
+    } finally {
+      valueSetter.mockRestore();
+      vi.unstubAllGlobals();
+    }
+  });
+
   it("executes slash commands via keyboard selection", async () => {
     const handleFirst = vi.fn();
     const handleSecond = vi.fn();
@@ -477,6 +508,31 @@ describe("CopilotChatInput", () => {
     });
   });
 
+  it("opens the slash menu for typed text once commands arrive", async () => {
+    const toolsMenu = ref<{ label: string; action: () => void }[]>([]);
+    const Host = defineComponent({
+      setup: () => () =>
+        h(
+          CopilotChatConfigurationProvider,
+          { threadId: TEST_THREAD_ID },
+          {
+            default: () => h(CopilotChatInput, { toolsMenu: toolsMenu.value }),
+          },
+        ),
+    });
+    render(Host);
+
+    await fireEvent.input(screen.getByRole("textbox"), {
+      target: { value: "/sum" },
+    });
+    expect(screen.queryByTestId("copilot-slash-menu")).toBeNull();
+
+    toolsMenu.value = [{ label: "Summarize", action: vi.fn() }];
+
+    const menu = await screen.findByTestId("copilot-slash-menu");
+    expect(within(menu).getByRole("option").textContent).toContain("Summarize");
+  });
+
   it("limits slash menu height when commands exceed five items", async () => {
     const tools = Array.from({ length: 6 }, (_, index) => ({
       label: `Command ${index + 1}`,