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

package/src/v2/lib/__tests__/shallow-stable.test.ts

@@ -0,0 +1,54 @@
+import { describe, expect, it } from "vitest";
+import { nextTick, shallowRef } from "vue";
+import { useShallowStableRef } from "../shallow-stable";
+
+/** A stable ref over a source the test replaces with `set(next)`. */
+function stableOver<T>(initial: T) {
+  const source = shallowRef(initial);
+  const stable = useShallowStableRef(source);
+  const set = async (next: T) => {
+    source.value = next;
+    await nextTick();
+  };
+  return { stable, set };
+}
+
+describe("useShallowStableRef", () => {
+  it("keeps the reference for a shallowly equal plain object", async () => {
+    const { stable, set } = stableOver({ a: 1 });
+    const first = stable.value;
+
+    await set({ a: 1 });
+
+    expect(stable.value).toBe(first);
+  });
+
+  it("updates the reference when a value changes", async () => {
+    const { stable, set } = stableOver({ a: 1 });
+
+    await set({ a: 2 });
+
+    expect(stable.value).toEqual({ a: 2 });
+  });
+
+  it("updates the reference when a different key holds undefined", async () => {
+    const { stable, set } = stableOver<{ a?: number; b?: number }>({
+      a: undefined,
+    });
+    const first = stable.value;
+
+    await set({ b: undefined });
+
+    expect(stable.value).not.toBe(first);
+    expect(stable.value).toEqual({ b: undefined });
+  });
+
+  it("compares arrays by reference", async () => {
+    const { stable, set } = stableOver([1, 2]);
+    const first = stable.value;
+
+    await set([1, 2]);
+
+    expect(stable.value).not.toBe(first);
+  });
+});

package/src/v2/lib/is-mobile-viewport.ts

@@ -1,23 +1,5 @@
-/**
- * Media query for the mobile breakpoint, shared so the string literal isn't
- * duplicated across call sites within this package (e.g. `CopilotModalHeader`,
- * which needs a live `matchMedia` change-listener and so can't call
- * `isMobileViewport()` directly).
- */
-export const MOBILE_MAX_WIDTH_QUERY = "(max-width: 767px)";
-
-/**
- * Reports whether the viewport is in the mobile range (`<768px`), where the
- * drawer and chat modal are mutually exclusive. SSR-safe (returns `false`
- * when `window` is absent) and guards environments where `window` exists but
- * `window.matchMedia` does not (some test runners, embedded webviews).
- */
-export function isMobileViewport(): boolean {
-  if (
-    typeof window === "undefined" ||
-    typeof window.matchMedia !== "function"
-  ) {
-    return false;
-  }
-  return window.matchMedia(MOBILE_MAX_WIDTH_QUERY).matches;
-}
+// The mobile breakpoint lives in core. This module keeps the import path stable.
+export {
+  ɵMOBILE_MAX_WIDTH_QUERY as MOBILE_MAX_WIDTH_QUERY,
+  ɵisMobileViewport as isMobileViewport,
+} from "@copilotkit/core";

package/src/v2/lib/shallow-stable.ts

@@ -1,21 +1,7 @@
+import { ɵshallowEqualRecord } from "@copilotkit/core";
 import { shallowRef, toValue, watch } from "vue";
 import type { MaybeRefOrGetter, ShallowRef } from "vue";
 
-function shallowEqualObjects(
-  first: Record<string, unknown>,
-  second: Record<string, unknown>,
-): boolean {
-  const firstKeys = Object.keys(first);
-  const secondKeys = Object.keys(second);
-  if (firstKeys.length !== secondKeys.length) return false;
-
-  for (const key of firstKeys) {
-    if (first[key] !== second[key]) return false;
-  }
-
-  return true;
-}
-
 function isPlainObject(value: unknown): value is Record<string, unknown> {
   return (
     value !== null &&
@@ -40,7 +26,7 @@ export function useShallowStableRef<T>(
       if (previous === next) return;
 
       if (isPlainObject(previous) && isPlainObject(next)) {
-        if (shallowEqualObjects(previous, next)) {
+        if (ɵshallowEqualRecord(previous, next)) {
           return;
         }
       }