@copilotkit/vue 1.62.0 → 1.62.2

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

@@ -0,0 +1,285 @@
+<script setup lang="ts">
+import { computed, onMounted, onScopeDispose, ref, watchEffect } from "vue";
+// NOTE: the `<copilotkit-threads-drawer>` element is a Lit custom element whose
+// module evaluates `class ... extends HTMLElement` at import time, which throws
+// under SSR (Node has no DOM). It is therefore imported LAZILY (client-only,
+// inside onMounted) rather than statically, so that importing `@copilotkit/vue`
+// stays SSR-safe for every consumer (e.g. Nuxt). Only the erased `import type`
+// below is kept at module scope.
+import type {
+  CopilotKitThreadsDrawer as CopilotKitThreadsDrawerElement,
+  DrawerThread,
+  ThreadSelectedDetail,
+  ArchiveDetail,
+  UnarchiveDetail,
+  DeleteDetail,
+  RetryDetail,
+  OpenChangeDetail,
+} from "@copilotkit/web-components/threads-drawer";
+import { DEFAULT_AGENT_ID } from "@copilotkit/shared";
+import { useThreads } from "../../hooks/use-threads";
+import type { Thread } from "../../hooks/use-threads";
+import { useCopilotChatConfiguration } from "../../providers/useCopilotChatConfiguration";
+import { useLicenseContext } from "../../providers/useLicenseContext";
+
+const props = withDefaults(
+  defineProps<{
+    agentId?: string;
+    onThreadSelect?: (threadId: string) => void;
+    onNewThread?: () => void;
+    onLicensed?: () => void;
+    licenseUrl?: string;
+    label?: string;
+    limit?: number;
+    dataTestId?: string;
+  }>(),
+  { dataTestId: "copilot-threads-drawer" },
+);
+
+const config = useCopilotChatConfiguration();
+const license = useLicenseContext();
+
+const licensed = computed(() => {
+  const status = license.value.status;
+  const present = status === "valid" || status === "expiring";
+  return present && license.value.checkFeature("threads");
+});
+const licensePending = computed(() => license.value.status === null);
+
+const resolvedAgentId = computed(
+  () => props.agentId ?? config.value?.agentId ?? DEFAULT_AGENT_ID,
+);
+const activeThreadId = computed(() => config.value?.threadId ?? null);
+
+// Provider-less fallback: without a surrounding chat configuration there is
+// no shared open-state to bind to, so the wrapper keeps its own local
+// open-state. It starts CLOSED — matching the provider's own default — so a
+// bare `<CopilotThreadsDrawer>` does not render stuck-open and the element's
+// open-change events still toggle it.
+const localDrawerOpen = ref(false);
+const drawerOpen = computed(() =>
+  config.value ? config.value.drawerOpen : localDrawerOpen.value,
+);
+function setDrawerOpen(open: boolean) {
+  if (config.value) config.value.setDrawerOpen?.(open);
+  else localDrawerOpen.value = open;
+}
+
+const threadsApi = useThreads({
+  agentId: resolvedAgentId,
+  includeArchived: true,
+  enabled: licensed,
+  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),
+);
+
+// Client-only element registration (SSR-safe). The element module is imported
+// lazily here (never at module scope — see the import note above) so SSR never
+// evaluates its `extends HTMLElement`. `elementTag` holds the resolved custom-
+// element tag and `mounted` gates the render; both are set only after the
+// dynamic import resolves on the client.
+const mounted = ref(false);
+const elementTag = ref<string | null>(null);
+const elRef = ref<CopilotKitThreadsDrawerElement | null>(null);
+onMounted(async () => {
+  const mod = await import("@copilotkit/web-components/threads-drawer");
+  mod.defineCopilotKitThreadsDrawer();
+  elementTag.value = mod.COPILOTKIT_THREADS_DRAWER_TAG;
+  mounted.value = true;
+});
+
+// Imperatively push object/array/boolean PROPERTIES (v-bind on a custom element
+// would set string attributes for these). Re-runs whenever the element or any
+// reactive value read in the body changes (auto-tracked by watchEffect).
+watchEffect(
+  () => {
+    const el = elRef.value;
+    if (!el) return;
+    el.threads = drawerThreads.value;
+    el.loading = threadsApi.isLoading.value || licensePending.value;
+    el.error = threadsApi.listError.value?.message ?? null;
+    el.activeThreadId = activeThreadId.value;
+    el.licensed = licensed.value || licensePending.value;
+    el.hasMore = threadsApi.hasMoreThreads.value;
+    el.fetchingMore = threadsApi.isFetchingMoreThreads.value;
+    el.open = drawerOpen.value;
+    if (props.label !== undefined) el.label = props.label;
+    if (props.licenseUrl !== undefined) el.licenseUrl = props.licenseUrl;
+  },
+  { flush: "post" },
+);
+
+// Announce drawer presence so the mobile header launcher renders. Register
+// synchronously in setup (React parity: a mount-time effect) and de-register
+// on scope dispose. Not gated on `mounted`: presence is independent of the
+// client-only element registration.
+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();
+}
+
+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?.();
+}
+function onArchive(event: Event) {
+  const { threadId } = (event as CustomEvent<ArchiveDetail>).detail;
+  void threadsApi
+    .archiveThread(threadId)
+    .catch((e) =>
+      console.error("CopilotThreadsDrawer: archiveThread failed", e),
+    );
+}
+function onUnarchive(event: Event) {
+  const { threadId } = (event as CustomEvent<UnarchiveDetail>).detail;
+  void threadsApi
+    .unarchiveThread(threadId)
+    .catch((e) =>
+      console.error("CopilotThreadsDrawer: unarchiveThread failed", e),
+    );
+}
+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();
+}
+function onRetry(event: Event) {
+  const { scope } = (event as CustomEvent<RetryDetail>).detail;
+  if (scope === "fetch-more") threadsApi.fetchMoreThreads();
+  else threadsApi.refetchThreads();
+}
+function onLoadMore() {
+  threadsApi.fetchMoreThreads();
+}
+function onOpenChange(event: Event) {
+  const { open } = (event as CustomEvent<OpenChangeDetail>).detail;
+  setDrawerOpen(open);
+}
+function handleLicensed() {
+  props.onLicensed?.();
+}
+
+defineSlots<{
+  default(): unknown;
+  /**
+   * Optional per-row content. When provided, this slot is rendered as
+   * light-DOM children with `slot="row:{id}"` for EVERY thread in the list,
+   * so the element projects it in place of the default row for all rows.
+   *
+   * Unlike React's `renderRow` (which returns `ReactNode | null` and can
+   * fall back to the element's built-in row on a per-thread basis by
+   * returning `null`), Vue's scoped slot is all-or-nothing: there is no
+   * per-row escape hatch back to the element default once the slot is
+   * defined. This is an intentional Vue-idiom divergence, not a bug — if a
+   * consumer needs per-row fallback, they should replicate the default row
+   * markup themselves inside the slot for the threads they don't want to
+   * customize.
+   */
+  row(props: { thread: Thread }): unknown;
+}>();
+</script>
+
+<template>
+  <component
+    :is="elementTag"
+    v-if="mounted"
+    ref="elRef"
+    :data-testid="dataTestId"
+    @thread-selected="onThreadSelected"
+    @new-thread="handleNewThread"
+    @archive="onArchive"
+    @unarchive="onUnarchive"
+    @delete="onDelete"
+    @filter-change="onFilterChange"
+    @retry="onRetry"
+    @load-more="onLoadMore"
+    @open-change="onOpenChange"
+    @licensed="handleLicensed"
+  >
+    <slot />
+    <!--
+      When the `row` slot is defined, it is projected for EVERY thread (no
+      per-row fallback to the element default) — see the JSDoc on the `row`
+      slot above for the React `renderRow` comparison.
+    -->
+    <template v-if="$slots.row">
+      <div
+        v-for="t in threadsApi.threads.value"
+        :key="t.id"
+        v-bind="{ slot: `row:${t.id}` }"
+      >
+        <slot name="row" :thread="t" />
+      </div>
+    </template>
+  </component>
+</template>

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

@@ -0,0 +1,160 @@
+import { describe, expect, it, vi } from "vitest";
+import { defineComponent, h, nextTick } from "vue";
+import { flushPromises, mount } from "@vue/test-utils";
+import CopilotKitProvider from "../../../providers/CopilotKitProvider.vue";
+import CopilotChatConfigurationProvider from "../../../providers/CopilotChatConfigurationProvider.vue";
+import { useCopilotChatConfiguration } from "../../../providers/useCopilotChatConfiguration";
+import { useCopilotKit } from "../../../providers/useCopilotKit";
+import { StateCapturingAgent } from "../../../__tests__/utils/agents";
+import CopilotChat from "../CopilotChat.vue";
+import { getThreadClone } from "../../../hooks/use-agent";
+
+// Proves the clear-on-fresh watch introduced in CopilotChat.vue:
+//   - does NOT clear messages on initial mount
+//   - DOES clear messages (setMessages([])) when the surrounding chat
+//     configuration transitions to a fresh, non-explicit thread via
+//     startNewThread()
+describe("CopilotChat clear-on-fresh", () => {
+  it("does not clear messages on initial mount", async () => {
+    const agent = new StateCapturingAgent();
+
+    let core:
+      | ReturnType<typeof useCopilotKit>["copilotkit"]["value"]
+      | undefined;
+    const Probe = defineComponent({
+      setup() {
+        const { copilotkit } = useCopilotKit();
+        core = copilotkit.value;
+        return () => null;
+      },
+    });
+
+    mount(CopilotKitProvider, {
+      props: {
+        agents__unsafe_dev_only: { default: agent },
+      },
+      slots: {
+        default: () =>
+          h(
+            CopilotChatConfigurationProvider,
+            { threadId: "seed", hasExplicitThreadId: false },
+            {
+              default: () =>
+                h("div", [h(CopilotChat, { welcomeScreen: false }), h(Probe)]),
+            },
+          ),
+      },
+    });
+
+    await flushPromises();
+    await nextTick();
+
+    const registryAgent = core?.getAgent("default");
+    const resolvedAgent = getThreadClone(registryAgent, "seed");
+    expect(resolvedAgent).toBeDefined();
+
+    // Attach the spy only after mount has settled so the clone's own
+    // construction-time `setMessages([])` reset (in `cloneForThread`,
+    // unrelated to the clear-on-fresh watch) isn't mistaken for a clear.
+    const setMessagesSpy = vi.spyOn(resolvedAgent!, "setMessages");
+    await nextTick();
+
+    expect(setMessagesSpy).not.toHaveBeenCalled();
+  });
+
+  it("clears messages when startNewThread() drives a fresh, non-explicit switch", async () => {
+    const agent = new StateCapturingAgent();
+
+    let core:
+      | ReturnType<typeof useCopilotKit>["copilotkit"]["value"]
+      | undefined;
+    let startNewThread: (() => void) | undefined;
+    let setActiveThreadId:
+      | ((threadId: string, options?: { explicit?: boolean }) => void)
+      | undefined;
+    let currentThreadId: string | undefined;
+
+    const Probe = defineComponent({
+      setup() {
+        const { copilotkit } = useCopilotKit();
+        const chatConfig = useCopilotChatConfiguration();
+        core = copilotkit.value;
+        startNewThread = () => chatConfig.value?.startNewThread?.();
+        setActiveThreadId = (threadId, options) =>
+          chatConfig.value?.setActiveThreadId?.(threadId, options);
+        return () => {
+          currentThreadId = chatConfig.value?.threadId;
+          return null;
+        };
+      },
+    });
+
+    mount(CopilotKitProvider, {
+      props: {
+        agents__unsafe_dev_only: { default: agent },
+      },
+      slots: {
+        default: () =>
+          h(
+            CopilotChatConfigurationProvider,
+            { threadId: "seed", hasExplicitThreadId: false },
+            {
+              default: () =>
+                h("div", [h(CopilotChat, { welcomeScreen: false }), h(Probe)]),
+            },
+          ),
+      },
+    });
+
+    await flushPromises();
+    await nextTick();
+
+    const registryAgent = core?.getAgent("default");
+    const seedAgent = getThreadClone(registryAgent, "seed");
+    expect(seedAgent).toBeDefined();
+    expect(currentThreadId).toBe("seed");
+
+    expect(startNewThread).toBeDefined();
+    startNewThread!();
+    await flushPromises();
+    await nextTick();
+
+    expect(currentThreadId).toBeDefined();
+    expect(currentThreadId).not.toBe("seed");
+    const newAgentThreadId = currentThreadId!;
+    const newAgent = getThreadClone(registryAgent, newAgentThreadId);
+    expect(newAgent).toBeDefined();
+    expect(newAgent).not.toBe(seedAgent);
+
+    // Primary, behavioral assertion: the new agent ends with no messages
+    // after the fresh switch (this alone doesn't distinguish the watch from
+    // clone construction, since `cloneForThread` also resets to `[]`).
+    expect(newAgent!.messages).toEqual([]);
+
+    // Move to a third, unrelated non-explicit thread so `newAgent` is no
+    // longer the active agent, then dirty it directly (bypassing
+    // `cloneForThread`'s construction reset entirely, since the clone
+    // already exists in the cache).
+    expect(setActiveThreadId).toBeDefined();
+    setActiveThreadId!("elsewhere", { explicit: false });
+    await flushPromises();
+    await nextTick();
+    expect(currentThreadId).toBe("elsewhere");
+
+    newAgent!.setMessages([{ id: "m1", role: "user", content: "hi" } as never]);
+    expect(newAgent!.messages.length).toBe(1);
+
+    // Switch back to `newAgent`'s thread id, non-explicitly. Because the
+    // clone already exists in the cache, `getOrCreateThreadClone` returns it
+    // without reconstructing it — so any `setMessages([])` observed here
+    // must come from the clear-on-fresh watch, not from clone construction.
+    // This fails (messages stay dirty) if the watch's
+    // `currentAgent.setMessages([])` call is removed.
+    setActiveThreadId!(newAgentThreadId, { explicit: false });
+    await flushPromises();
+    await nextTick();
+
+    expect(currentThreadId).toBe(newAgentThreadId);
+    expect(newAgent!.messages).toEqual([]);
+  });
+});

package/src/v2/components/chat/__tests__/CopilotModalHeader.drawerLauncher.test.ts

@@ -0,0 +1,125 @@
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { defineComponent, h, nextTick } from "vue";
+import { mount } from "@vue/test-utils";
+import CopilotKitProvider from "../../../providers/CopilotKitProvider.vue";
+import CopilotChatConfigurationProvider from "../../../providers/CopilotChatConfigurationProvider.vue";
+import { useCopilotChatConfiguration } from "../../../providers/useCopilotChatConfiguration";
+import { CopilotModalHeader } from "../index";
+
+function mockMatchMedia(matches: boolean) {
+  vi.spyOn(window, "matchMedia").mockReturnValue({
+    matches,
+    media: "(max-width: 767px)",
+    onchange: null,
+    addEventListener: vi.fn(),
+    removeEventListener: vi.fn(),
+    addListener: vi.fn(),
+    removeListener: vi.fn(),
+    dispatchEvent: vi.fn(),
+  } as unknown as MediaQueryList);
+}
+
+function makeProbe(
+  onConfig: (cfg: ReturnType<typeof useCopilotChatConfiguration>) => void,
+) {
+  return defineComponent({
+    setup() {
+      const config = useCopilotChatConfiguration();
+      onConfig(config);
+      return () => h("span", { "data-testid": "probe" });
+    },
+  });
+}
+
+describe("CopilotModalHeader drawer launcher", () => {
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  it("does not render the launcher when no drawer is registered (mobile)", () => {
+    mockMatchMedia(true);
+
+    const wrapper = mount(CopilotKitProvider, {
+      props: { runtimeUrl: "/api/copilotkit" },
+      slots: {
+        default: () =>
+          h(
+            CopilotChatConfigurationProvider,
+            { isModalDefaultOpen: true },
+            { default: () => h(CopilotModalHeader) },
+          ),
+      },
+    });
+
+    expect(wrapper.find('[data-testid="drawer-launcher"]').exists()).toBe(
+      false,
+    );
+  });
+
+  it("renders the launcher and toggles drawerOpen when registered on mobile", async () => {
+    mockMatchMedia(true);
+
+    let cfg!: ReturnType<typeof useCopilotChatConfiguration>;
+    const Probe = makeProbe((config) => {
+      cfg = config;
+    });
+
+    const wrapper = mount(CopilotKitProvider, {
+      props: { runtimeUrl: "/api/copilotkit" },
+      slots: {
+        default: () =>
+          h(
+            CopilotChatConfigurationProvider,
+            { isModalDefaultOpen: true },
+            { default: () => [h(CopilotModalHeader), h(Probe)] },
+          ),
+      },
+    });
+
+    // No drawer registered yet -> no launcher.
+    expect(wrapper.find('[data-testid="drawer-launcher"]').exists()).toBe(
+      false,
+    );
+
+    cfg.value?.registerDrawer();
+    await nextTick();
+
+    const launcher = wrapper.find('[data-testid="drawer-launcher"]');
+    expect(launcher.exists()).toBe(true);
+
+    expect(cfg.value?.drawerOpen).toBe(false);
+    await launcher.trigger("click");
+
+    expect(cfg.value?.drawerOpen).toBe(true);
+    // Mobile mutual-exclusion: opening the drawer closes the modal.
+    expect(cfg.value?.isModalOpen).toBe(false);
+  });
+
+  it("does not render the launcher on desktop even when a drawer is registered", async () => {
+    mockMatchMedia(false);
+
+    let cfg!: ReturnType<typeof useCopilotChatConfiguration>;
+    const Probe = makeProbe((config) => {
+      cfg = config;
+    });
+
+    const wrapper = mount(CopilotKitProvider, {
+      props: { runtimeUrl: "/api/copilotkit" },
+      slots: {
+        default: () =>
+          h(
+            CopilotChatConfigurationProvider,
+            { isModalDefaultOpen: true },
+            { default: () => [h(CopilotModalHeader), h(Probe)] },
+          ),
+      },
+    });
+
+    cfg.value?.registerDrawer();
+    await nextTick();
+
+    expect(wrapper.find('[data-testid="drawer-launcher"]').exists()).toBe(
+      false,
+    );
+  });
+});

package/src/v2/components/chat/__tests__/CopilotThreadsDrawer.ssr.test.ts

@@ -0,0 +1,25 @@
+import { describe, expect, it, vi } from "vitest";
+
+// Regression guard: importing @copilotkit/vue must NOT eagerly evaluate the
+// Lit <copilotkit-threads-drawer> element module. The element evaluates
+// `class extends HTMLElement` at import time, which crashes Nuxt/Vite SSR
+// (`HTMLElement is not defined`); it must be imported lazily (client-only,
+// inside the wrapper's onMounted). If the wrapper ever regresses to a static
+// top-level import, importing the package barrel would evaluate the mocked
+// element module and flip the flag -> this test fails.
+const { evaluated } = vi.hoisted(() => ({ evaluated: { current: false } }));
+vi.mock("@copilotkit/web-components/threads-drawer", () => {
+  evaluated.current = true;
+  return {
+    defineCopilotKitThreadsDrawer: () => {},
+    COPILOTKIT_THREADS_DRAWER_TAG: "copilotkit-threads-drawer",
+  };
+});
+
+describe("@copilotkit/vue SSR import safety", () => {
+  it("does not eagerly evaluate the Lit element module when the package entry is imported", async () => {
+    const mod = await import("../../../../index");
+    expect(mod.CopilotThreadsDrawer).toBeDefined();
+    expect(evaluated.current).toBe(false);
+  });
+});