@copilotkit/vue 1.57.1

package/src/v2/hooks/__tests__/use-keyboard-height.test.ts

@@ -0,0 +1,199 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { defineComponent, h, nextTick } from "vue";
+import { render } from "@testing-library/vue";
+import { useKeyboardHeight, type KeyboardState } from "../use-keyboard-height";
+
+function mountHook() {
+  let state: KeyboardState | null = null;
+  const Harness = defineComponent({
+    setup() {
+      state = useKeyboardHeight();
+      return () => h("div");
+    },
+  });
+  const result = render(Harness);
+  if (!state) {
+    throw new Error("Hook harness was not initialized.");
+  }
+  return { ...result, state: state! };
+}
+
+describe("useKeyboardHeight", () => {
+  let visualViewportListeners: Map<string, ((event: Event) => void)[]>;
+  let mockVisualViewport: {
+    height: number;
+    addEventListener: ReturnType<typeof vi.fn>;
+    removeEventListener: ReturnType<typeof vi.fn>;
+  } | null;
+  let originalVisualViewport: VisualViewport | null;
+  let originalInnerHeight: number;
+
+  beforeEach(() => {
+    visualViewportListeners = new Map();
+    originalVisualViewport = window.visualViewport;
+    originalInnerHeight = window.innerHeight;
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+    Object.defineProperty(window, "visualViewport", {
+      value: originalVisualViewport,
+      writable: true,
+      configurable: true,
+    });
+    Object.defineProperty(window, "innerHeight", {
+      value: originalInnerHeight,
+      writable: true,
+      configurable: true,
+    });
+  });
+
+  describe("Visual Viewport API unavailable", () => {
+    it("returns default state when Visual Viewport API unavailable", async () => {
+      Object.defineProperty(window, "visualViewport", {
+        value: null,
+        writable: true,
+        configurable: true,
+      });
+
+      const { state } = mountHook();
+      await nextTick();
+
+      expect(state.isKeyboardOpen.value).toBe(false);
+      expect(state.keyboardHeight.value).toBe(0);
+    });
+  });
+
+  describe("Keyboard detection", () => {
+    beforeEach(() => {
+      mockVisualViewport = {
+        height: 800,
+        addEventListener: vi.fn(
+          (type: string, listener: (event: Event) => void) => {
+            const listeners = visualViewportListeners.get(type) || [];
+            listeners.push(listener);
+            visualViewportListeners.set(type, listeners);
+          },
+        ),
+        removeEventListener: vi.fn(
+          (type: string, listener: (event: Event) => void) => {
+            const listeners = visualViewportListeners.get(type) || [];
+            const index = listeners.indexOf(listener);
+            if (index > -1) {
+              listeners.splice(index, 1);
+            }
+            visualViewportListeners.set(type, listeners);
+          },
+        ),
+      };
+
+      Object.defineProperty(window, "visualViewport", {
+        value: mockVisualViewport,
+        writable: true,
+        configurable: true,
+      });
+
+      Object.defineProperty(window, "innerHeight", {
+        value: 800,
+        writable: true,
+        configurable: true,
+      });
+    });
+
+    it("detects keyboard open when height diff > 150px", async () => {
+      const { state } = mountHook();
+      await nextTick();
+
+      expect(state.isKeyboardOpen.value).toBe(false);
+      expect(state.keyboardHeight.value).toBe(0);
+
+      mockVisualViewport!.height = 500;
+      const resizeListeners = visualViewportListeners.get("resize") || [];
+      resizeListeners.forEach((listener) => listener(new Event("resize")));
+      await nextTick();
+
+      expect(state.isKeyboardOpen.value).toBe(true);
+      expect(state.keyboardHeight.value).toBe(300);
+      expect(state.availableHeight.value).toBe(500);
+    });
+
+    it("detects keyboard closed when height diff <= 150px", async () => {
+      mockVisualViewport!.height = 500;
+
+      const { state } = mountHook();
+      await nextTick();
+
+      expect(state.isKeyboardOpen.value).toBe(true);
+      expect(state.keyboardHeight.value).toBe(300);
+
+      mockVisualViewport!.height = 800;
+      const resizeListeners = visualViewportListeners.get("resize") || [];
+      resizeListeners.forEach((listener) => listener(new Event("resize")));
+      await nextTick();
+
+      expect(state.isKeyboardOpen.value).toBe(false);
+      expect(state.keyboardHeight.value).toBe(0);
+    });
+
+    it("updates on visualViewport resize event", async () => {
+      const { state } = mountHook();
+      await nextTick();
+
+      expect(state.keyboardHeight.value).toBe(0);
+
+      mockVisualViewport!.height = 600;
+      let resizeListeners = visualViewportListeners.get("resize") || [];
+      resizeListeners.forEach((listener) => listener(new Event("resize")));
+      await nextTick();
+
+      expect(state.keyboardHeight.value).toBe(200);
+      expect(state.availableHeight.value).toBe(600);
+
+      mockVisualViewport!.height = 400;
+      resizeListeners = visualViewportListeners.get("resize") || [];
+      resizeListeners.forEach((listener) => listener(new Event("resize")));
+      await nextTick();
+
+      expect(state.keyboardHeight.value).toBe(400);
+      expect(state.availableHeight.value).toBe(400);
+    });
+
+    it("updates on visualViewport scroll event", async () => {
+      const { state } = mountHook();
+      await nextTick();
+
+      mockVisualViewport!.height = 550;
+      const scrollListeners = visualViewportListeners.get("scroll") || [];
+      scrollListeners.forEach((listener) => listener(new Event("scroll")));
+      await nextTick();
+
+      expect(state.keyboardHeight.value).toBe(250);
+      expect(state.availableHeight.value).toBe(550);
+    });
+
+    it("cleans up event listeners on unmount", async () => {
+      const { unmount } = mountHook();
+      await nextTick();
+
+      expect(mockVisualViewport!.addEventListener).toHaveBeenCalledWith(
+        "resize",
+        expect.any(Function),
+      );
+      expect(mockVisualViewport!.addEventListener).toHaveBeenCalledWith(
+        "scroll",
+        expect.any(Function),
+      );
+
+      unmount();
+
+      expect(mockVisualViewport!.removeEventListener).toHaveBeenCalledWith(
+        "resize",
+        expect.any(Function),
+      );
+      expect(mockVisualViewport!.removeEventListener).toHaveBeenCalledWith(
+        "scroll",
+        expect.any(Function),
+      );
+    });
+  });
+});

package/src/v2/hooks/__tests__/use-pin-to-send.test.ts

@@ -0,0 +1,363 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { defineComponent, h, nextTick, provide, ref } from "vue";
+import { mount } from "@vue/test-utils";
+import { usePinToSend } from "../use-pin-to-send";
+import {
+  LastUserMessageKey,
+  type LastUserMessageState,
+} from "../../components/chat/last-user-message-context";
+
+// Strict counterpart of React `use-pin-to-send.test.tsx`.
+// Keep case order, wording, and harness shape aligned 1:1 with the React suite.
+//
+// Vue divergences from the React harness:
+// - React passes `LastUserMessageContext.Provider value={...}` and rerenders
+//   to mutate it. Vue idiomatically `provide()`s a `Ref<LastUserMessageState>`
+//   and mutates `.value` to trigger downstream `watch` effects.
+// - React stubs `requestAnimationFrame`; Vue tests do the same to keep
+//   scroll assertions deterministic in jsdom.
+
+function setHeight(el: HTMLElement, height: number) {
+  Object.defineProperty(el, "clientHeight", {
+    configurable: true,
+    value: height,
+  });
+  Object.defineProperty(el, "offsetHeight", {
+    configurable: true,
+    value: height,
+  });
+  el.getBoundingClientRect = () =>
+    ({
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: height,
+      width: 100,
+      height,
+      x: 0,
+      y: 0,
+      toJSON: () => ({}),
+    }) as DOMRect;
+}
+
+const HarnessInner = defineComponent({
+  props: {
+    topOffset: { type: Number, default: 16 },
+  },
+  setup(props) {
+    const scrollRef = ref<HTMLElement | null>(null);
+    const contentRef = ref<HTMLElement | null>(null);
+    const spacerRef = ref<HTMLElement | null>(null);
+
+    usePinToSend({
+      scrollRef,
+      contentRef,
+      spacerRef,
+      topOffset: props.topOffset,
+    });
+
+    return () =>
+      h("div", { ref: scrollRef, "data-testid": "scroll" }, [
+        h("div", { ref: contentRef, "data-testid": "content" }, [
+          h(
+            "div",
+            { "data-message-id": "m1", "data-role": "user" },
+            "user msg 1",
+          ),
+          h(
+            "div",
+            {
+              "data-message-id": "m2",
+              "data-role": "assistant",
+            },
+            "asst msg 1",
+          ),
+          h(
+            "div",
+            { "data-message-id": "m3", "data-role": "user" },
+            "user msg 2",
+          ),
+        ]),
+        h("div", {
+          ref: spacerRef,
+          "data-testid": "spacer",
+          style: { height: "0px" },
+        }),
+      ]);
+  },
+});
+
+function mountHarness(initial: LastUserMessageState, topOffset = 16) {
+  const lastUserMessage = ref<LastUserMessageState>({ ...initial });
+  const wrapper = mount(
+    defineComponent({
+      setup() {
+        provide(LastUserMessageKey, lastUserMessage);
+        return () => h(HarnessInner, { topOffset });
+      },
+    }),
+    { attachTo: document.body },
+  );
+
+  return {
+    wrapper,
+    lastUserMessage,
+    scroll: wrapper.get("[data-testid='scroll']").element as HTMLElement,
+    content: wrapper.get("[data-testid='content']").element as HTMLElement,
+    spacer: wrapper.get("[data-testid='spacer']").element as HTMLElement,
+  };
+}
+
+beforeEach(() => {
+  HTMLElement.prototype.scrollTo =
+    vi.fn() as unknown as typeof Element.prototype.scrollTo;
+  // jsdom does not run rAF callbacks — stub it to fire synchronously so scroll
+  // assertions work (mirrors React harness setup).
+  vi.stubGlobal("requestAnimationFrame", (cb: FrameRequestCallback) => {
+    cb(0);
+    return 0;
+  });
+  vi.stubGlobal("cancelAnimationFrame", vi.fn());
+});
+
+afterEach(() => {
+  vi.unstubAllGlobals();
+});
+
+describe("usePinToSend", () => {
+  it("sets spacer height to viewportHeight - userMessageHeight - topOffset on new send", async () => {
+    const harness = mountHarness({ id: null, sendNonce: 0 });
+
+    setHeight(harness.scroll, 800);
+    const userMsg = harness.scroll.querySelector(
+      '[data-message-id="m3"]',
+    ) as HTMLElement;
+    setHeight(userMsg, 40);
+
+    harness.lastUserMessage.value = { id: "m3", sendNonce: 1 };
+    await nextTick();
+
+    // viewport=800, userMsg=40, topOffset=16
+    // spacer = max(0, 800 - 40 - 16) = 744
+    expect(harness.spacer.style.height).toBe("744px");
+  });
+
+  it("calls scrollTo with targetEl.offsetTop - topOffset on new send", async () => {
+    const harness = mountHarness({ id: null, sendNonce: 0 });
+
+    setHeight(harness.scroll, 800);
+    const scrollTo = harness.scroll.scrollTo as unknown as ReturnType<
+      typeof vi.fn
+    >;
+
+    const userMsg = harness.scroll.querySelector(
+      '[data-message-id="m3"]',
+    ) as HTMLElement;
+    setHeight(userMsg, 40);
+    // computeOffsetTop uses getBoundingClientRect; mock top=400 on userMsg
+    // and top=0 on scroll so elRect.top - stopRect.top + scrollEl.scrollTop =
+    // 400 - 0 + 0 = 400.
+    userMsg.getBoundingClientRect = () =>
+      ({
+        top: 400,
+        left: 0,
+        right: 100,
+        bottom: 440,
+        width: 100,
+        height: 40,
+        x: 0,
+        y: 400,
+        toJSON: () => ({}),
+      }) as DOMRect;
+
+    harness.lastUserMessage.value = { id: "m3", sendNonce: 1 };
+    await nextTick();
+
+    expect(scrollTo).toHaveBeenCalledWith({
+      top: 400 - 16,
+      behavior: "smooth",
+    });
+  });
+
+  it("shrinks spacer as content height grows (does not grow it)", async () => {
+    let observed: (() => void) | null = null;
+    // Must use a class (not an arrow function) so `new ResizeObserver(...)` works in jsdom.
+    class ROStub {
+      constructor(cb: () => void) {
+        observed = cb;
+      }
+      observe = vi.fn();
+      unobserve = vi.fn();
+      disconnect = vi.fn();
+    }
+    const prevRO = global.ResizeObserver;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    global.ResizeObserver = ROStub as any;
+
+    let wrapper: ReturnType<typeof mountHarness>["wrapper"] | null = null;
+    try {
+      const harness = mountHarness({ id: null, sendNonce: 0 });
+      wrapper = harness.wrapper;
+      setHeight(harness.scroll, 800);
+      const userMsg = harness.scroll.querySelector(
+        '[data-message-id="m3"]',
+      ) as HTMLElement;
+      setHeight(userMsg, 40);
+      setHeight(harness.content, 200);
+
+      harness.lastUserMessage.value = { id: "m3", sendNonce: 1 };
+      await nextTick();
+
+      // Initial: 800 - 40 - 16 = 744
+      expect(harness.spacer.style.height).toBe("744px");
+
+      // Simulate content growing — spacer should shrink
+      setHeight(harness.content, 600);
+      observed?.();
+      expect(parseInt(harness.spacer.style.height, 10)).toBeLessThan(744);
+
+      // Simulate content shrinking — spacer should NOT grow back
+      setHeight(harness.content, 100);
+      const shrunkHeight = harness.spacer.style.height;
+      observed?.();
+      expect(harness.spacer.style.height).toBe(shrunkHeight);
+    } finally {
+      wrapper?.unmount();
+      global.ResizeObserver = prevRO;
+    }
+  });
+
+  it("cancels the scheduled rAF on unmount (cleanup)", async () => {
+    const cancelSpy = vi.spyOn(global, "cancelAnimationFrame");
+    try {
+      const harness = mountHarness({ id: null, sendNonce: 0 });
+      setHeight(harness.scroll, 800);
+      const userMsg = harness.scroll.querySelector(
+        '[data-message-id="m3"]',
+      ) as HTMLElement;
+      setHeight(userMsg, 40);
+
+      harness.lastUserMessage.value = { id: "m3", sendNonce: 1 };
+      await nextTick();
+
+      harness.wrapper.unmount();
+      expect(cancelSpy).toHaveBeenCalled();
+    } finally {
+      cancelSpy.mockRestore();
+    }
+  });
+});
+
+// Vue-specific regression coverage: keep React-mirrored cases above, then
+// add the Vue-only watch-cleanup contract here. Vue's `watch` does not run
+// the previous run's cleanup automatically the way React's `useEffect`
+// does, so the implementation must explicitly register `teardown` via
+// `onCleanup`. These tests prove that a `ref` swap or `topOffset` change
+// without a new send still disconnects the prior `ResizeObserver`.
+describe("usePinToSend Vue-specific watch cleanup", () => {
+  it("disconnects the ResizeObserver when spacerRef goes from element to null without a new sendNonce", async () => {
+    let lastDisconnect: ReturnType<typeof vi.fn> | null = null;
+    let installCount = 0;
+    // Must use a class (not an arrow function) so `new ResizeObserver(...)` works in jsdom.
+    class ROStub {
+      observe = vi.fn();
+      unobserve = vi.fn();
+      disconnect = vi.fn();
+      constructor() {
+        installCount += 1;
+        this.disconnect = vi.fn();
+        lastDisconnect = this.disconnect;
+      }
+    }
+    const prevRO = global.ResizeObserver;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    global.ResizeObserver = ROStub as any;
+
+    const lastUserMessage = ref<LastUserMessageState>({
+      id: null,
+      sendNonce: 0,
+    });
+    const showSpacer = ref(true);
+
+    const HarnessToggleable = defineComponent({
+      setup() {
+        const scrollRef = ref<HTMLElement | null>(null);
+        const contentRef = ref<HTMLElement | null>(null);
+        const spacerRef = ref<HTMLElement | null>(null);
+
+        usePinToSend({ scrollRef, contentRef, spacerRef, topOffset: 16 });
+
+        return () =>
+          h("div", { ref: scrollRef, "data-testid": "scroll" }, [
+            h("div", { ref: contentRef, "data-testid": "content" }, [
+              h(
+                "div",
+                { "data-message-id": "m3", "data-role": "user" },
+                "user msg 2",
+              ),
+            ]),
+            showSpacer.value
+              ? h("div", {
+                  ref: spacerRef,
+                  "data-testid": "spacer",
+                  style: { height: "0px" },
+                })
+              : null,
+          ]);
+      },
+    });
+
+    try {
+      const wrapper = mount(
+        defineComponent({
+          setup() {
+            provide(LastUserMessageKey, lastUserMessage);
+            return () => h(HarnessToggleable);
+          },
+        }),
+        { attachTo: document.body },
+      );
+
+      const scroll = wrapper.get("[data-testid='scroll']")
+        .element as HTMLElement;
+      setHeight(scroll, 800);
+      const userMsg = scroll.querySelector(
+        '[data-message-id="m3"]',
+      ) as HTMLElement;
+      setHeight(userMsg, 40);
+
+      // First send installs a ResizeObserver against the content element.
+      lastUserMessage.value = { id: "m3", sendNonce: 1 };
+      await nextTick();
+      await nextTick();
+      expect(installCount).toBe(1);
+      expect(lastDisconnect).not.toBeNull();
+      expect(lastDisconnect).not.toHaveBeenCalled();
+
+      // Toggle the spacer off (autoScroll mode flip). Because `sendNonce`
+      // didn't change, the watcher's body early-returns. The previous
+      // run's `onCleanup(teardown)` must still fire and disconnect the RO.
+      showSpacer.value = false;
+      await nextTick();
+      await nextTick();
+      expect(lastDisconnect).toHaveBeenCalled();
+
+      // Toggling back without a new nonce must NOT install a new RO,
+      // mirroring React's `lastNonceRef` early-return semantics.
+      showSpacer.value = true;
+      await nextTick();
+      await nextTick();
+      expect(installCount).toBe(1);
+
+      // A new send re-anchors and installs a fresh RO.
+      lastUserMessage.value = { id: "m3", sendNonce: 2 };
+      await nextTick();
+      await nextTick();
+      expect(installCount).toBe(2);
+
+      wrapper.unmount();
+    } finally {
+      global.ResizeObserver = prevRO;
+    }
+  });
+});