@copilotkit/learning 0.0.1 → 1.80.0

package/src/__tests__/collector.test.ts

@@ -1,5 +1,17 @@
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import { createCollector } from "../collector";
+import type * as InputCapture from "../inputs";
+
+// jsdom cannot create trusted input; retain the real capture and lifecycle.
+vi.mock("../inputs", async (importOriginal) => {
+  const actual = await importOriginal<typeof InputCapture>();
+  return {
+    ...actual,
+    installInputCapture: (
+      params: Parameters<typeof actual.installInputCapture>[0],
+    ) => actual.installInputCapture({ ...params, isTrusted: () => true }),
+  };
+});
 import type { CollectorOptions, LearningBatch, LearningSink } from "../types";
 
 const NOW = 1_790_000_000_000;
@@ -19,6 +31,7 @@ beforeEach(() => {
 afterEach(() => {
   stopCurrent?.();
   stopCurrent = undefined;
+  document.body.innerHTML = "";
   vi.useRealTimers();
   vi.restoreAllMocks();
   vi.unstubAllGlobals();
@@ -305,3 +318,142 @@ describe("createCollector", () => {
     expect(sends).toEqual([{ beacon: true }]);
   });
 });
+
+it.each(["emit", "stop", "pagehide"])(
+  "the batched collector flushes pending input before %s",
+  (action) => {
+    const { collector, batches } = setup();
+    document.body.innerHTML = "<input>";
+    collector.start({ trajectoryId: "input-session" });
+    const input = document.querySelector("input")!;
+    input.value = "final text";
+    input.dispatchEvent(new Event("input", { bubbles: true }));
+    if (action === "emit") collector.emit("app.approved", {});
+    else if (action === "pagehide") {
+      window.dispatchEvent(new Event("pagehide"));
+      expect(names(batches)).toEqual(["page", "input"]);
+      expect(batches[0]?.events[1]?.value).toMatchObject({
+        target: { value: "final text" },
+      });
+    }
+    collector.stop();
+    const events = batches.flatMap((batch) => batch.events);
+    expect(events.map((event) => event.name)).toEqual([
+      "page",
+      "input",
+      ...(action === "emit" ? ["app.approved"] : []),
+    ]);
+    expect(events.map((event) => event.value.seq)).toEqual(
+      action === "emit" ? [1, 2, 3] : [1, 2],
+    );
+    expect(vi.getTimerCount()).toBe(0);
+  },
+);
+
+it("records input before a fast Enter-to-send network response outside a form", async () => {
+  const beforeSend = vi.fn<NonNullable<CollectorOptions["beforeSend"]>>(
+    (event) => event,
+  );
+  const { collector } = setup({ beforeSend });
+  document.body.innerHTML = "<input>";
+  collector.start({ trajectoryId: "enter-session" });
+  const input = document.querySelector("input")!;
+  let response: Promise<Response> | undefined;
+  input.addEventListener("keydown", (event) => {
+    if (event.key !== "Enter") return;
+    response = fetch("/todos", { method: "POST" });
+    input.value = "";
+  });
+  input.value = "Buy milk";
+  input.dispatchEvent(new Event("input", { bubbles: true }));
+  await vi.advanceTimersByTimeAsync(100);
+  input.dispatchEvent(
+    new KeyboardEvent("keydown", { key: "Enter", bubbles: true }),
+  );
+  await response;
+  await vi.advanceTimersByTimeAsync(0);
+
+  const events = beforeSend.mock.calls.map(([event]) => event);
+  expect(events.map((event) => event.name)).toEqual([
+    "page",
+    "input",
+    "network",
+  ]);
+  expect(events.map((event) => event.value.seq)).toEqual([1, 2, 3]);
+  expect(events[1]).toMatchObject({
+    timestamp: NOW + 100,
+    value: { target: { value: "Buy milk" } },
+  });
+  await vi.advanceTimersByTimeAsync(300);
+  expect(beforeSend).toHaveBeenCalledTimes(3);
+});
+
+it("network capture does not flush or delay pending text in the batched collector", async () => {
+  const beforeSend = vi.fn<NonNullable<CollectorOptions["beforeSend"]>>(
+    (event) => event,
+  );
+  const { collector, batches } = setup({ beforeSend });
+  document.body.innerHTML = "<input>";
+  collector.start({ trajectoryId: "typeahead-session" });
+  const input = document.querySelector("input")!;
+  input.value = "pending search";
+  input.dispatchEvent(new Event("input", { bubbles: true }));
+  await vi.advanceTimersByTimeAsync(100);
+
+  await fetch("/typeahead?q=pending");
+  await vi.advanceTimersByTimeAsync(0);
+
+  expect(beforeSend.mock.calls.map(([event]) => event.name)).toEqual([
+    "page",
+    "network",
+  ]);
+  await vi.advanceTimersByTimeAsync(199);
+  expect(beforeSend.mock.calls.map(([event]) => event.name)).toEqual([
+    "page",
+    "network",
+  ]);
+  await vi.advanceTimersByTimeAsync(1);
+  expect(beforeSend.mock.calls.map(([event]) => event.name)).toEqual([
+    "page",
+    "network",
+    "input",
+  ]);
+  expect(beforeSend.mock.calls[2]?.[0]).toMatchObject({
+    timestamp: NOW + 300,
+    value: { seq: 3, target: { value: "pending search" } },
+  });
+  collector.stop();
+  expect(names(batches)).toEqual(["page", "network", "input"]);
+});
+
+it("a reentrant stop/restart during input flush preserves the new batched session", () => {
+  const { collector, batches } = setup({
+    beforeSend(event) {
+      if (event.name === "input") {
+        collector.stop();
+        collector.start({ trajectoryId: "new-session" });
+      }
+      return event;
+    },
+  });
+  document.body.innerHTML = "<input>";
+  collector.start({ trajectoryId: "old-session" });
+  document.querySelector("input")!.value = "pending";
+  document
+    .querySelector("input")!
+    .dispatchEvent(new Event("input", { bubbles: true }));
+  collector.stop();
+  expect(collector.trajectoryId).toBe("new-session");
+  collector.emit("new.action", {});
+  collector.stop();
+  expect(
+    batches.map((batch) => [
+      batch.trajectoryId,
+      batch.events.map((event) => event.name),
+    ]),
+  ).toEqual([
+    ["old-session", ["page"]],
+    ["new-session", ["page", "new.action"]],
+  ]);
+  expect(vi.getTimerCount()).toBe(0);
+});

package/src/__tests__/inputs.test.ts

@@ -1,14 +1,17 @@
-import { afterEach, describe, expect, it } from "vitest";
+import { afterEach, describe, expect, it, vi } from "vitest";
 import { installInputCapture } from "../inputs";
+import { createRedactor } from "../redact";
 
 let uninstall: (() => void) | undefined;
 afterEach(() => {
   uninstall?.();
   document.body.innerHTML = "";
+  vi.useRealTimers();
 });
 
 describe("input capture", () => {
   it("captures edited text, checkbox state, and selected values, and redacts passwords", () => {
+    vi.useFakeTimers();
     document.body.innerHTML = `<input id="name"><input id="password" type="password" value="secret"><input id="check" type="checkbox"><textarea id="notes"></textarea><select id="choice" multiple><option value="a" selected>A</option><option value="b" selected>B</option></select><div id="editor" contenteditable="true">Rich text</div>`;
     const events: Record<string, unknown>[] = [];
     uninstall = installInputCapture({
@@ -33,6 +36,7 @@ describe("input capture", () => {
         element.checked = true;
       element.dispatchEvent(new Event("input", { bubbles: true }));
     }
+    vi.advanceTimersByTime(300);
     expect(events).toHaveLength(6);
     expect(events[0]).toMatchObject({
       name: "input",
@@ -75,3 +79,398 @@ describe("input capture", () => {
     expect(events).toEqual([]);
   });
 });
+
+function inputFixture(
+  markup = '<input id="first"><textarea id="second"></textarea>',
+) {
+  vi.useFakeTimers();
+  document.body.innerHTML = markup;
+  const emit = vi.fn();
+  const capture = installInputCapture({ emit, isTrusted: () => true });
+  uninstall = capture;
+  const edit = (id: string, value: string, type = "input") => {
+    const field = document.getElementById(id) as HTMLInputElement;
+    field.value = value;
+    field.dispatchEvent(new Event(type, { bubbles: true }));
+    return field;
+  };
+  return { emit, edit, capture };
+}
+
+it("debounces each text field for 300 ms and collapses input/change duplicates", () => {
+  const { emit, edit } = inputFixture();
+  edit("first", "a");
+  vi.advanceTimersByTime(200);
+  edit("first", "approved");
+  edit("first", "approved");
+  expect(emit).not.toHaveBeenCalled();
+  vi.advanceTimersByTime(299);
+  expect(emit).not.toHaveBeenCalled();
+  vi.advanceTimersByTime(1);
+  expect(emit.mock.calls.map(([, value]) => value.target.value)).toEqual([
+    "approved",
+  ]);
+  edit("first", "approved", "change");
+  vi.advanceTimersByTime(300);
+  expect(emit).toHaveBeenCalledOnce();
+});
+
+it("keeps discrete controls immediate and flushes prior text before them", () => {
+  const { emit, edit } = inputFixture(
+    '<input id="text"><input id="check" type="checkbox"><input id="range" type="range"><select id="select"><option value="a">A</option></select>',
+  );
+  edit("text", "final");
+  expect(emit).not.toHaveBeenCalled();
+  edit("check", "yes");
+  edit("check", "yes", "change");
+  edit("range", "60");
+  edit("select", "a", "change");
+  expect(
+    emit.mock.calls.map(([, value]) => value.target.attributes.id),
+  ).toEqual(["text", "check", "range", "select"]);
+  expect(vi.getTimerCount()).toBe(0);
+});
+
+it("waits for composition completion and emits the final value once", () => {
+  const { emit, edit } = inputFixture();
+  const field = document.getElementById("first")!;
+  edit("first", "prefix");
+  field.dispatchEvent(
+    new CompositionEvent("compositionstart", { bubbles: true }),
+  );
+  edit("first", "partial");
+  vi.advanceTimersByTime(1000);
+  expect(emit).not.toHaveBeenCalled();
+  (field as HTMLInputElement).value = "finished";
+  field.dispatchEvent(
+    new CompositionEvent("compositionend", { bubbles: true }),
+  );
+  edit("first", "finished");
+  vi.advanceTimersByTime(300);
+  expect(emit).toHaveBeenCalledOnce();
+  expect(emit).toHaveBeenCalledWith(
+    "input",
+    expect.objectContaining({
+      target: expect.objectContaining({ value: "finished" }),
+    }),
+  );
+});
+
+it.each(["reset", "ignore", "password"])(
+  "flushes original snapshots before submit and rechecks %s",
+  (change) => {
+    const { emit, edit } = inputFixture(
+      '<form><input id="first" data-copy="original"></form>',
+    );
+    const input = edit("first", "original");
+    expect(emit).not.toHaveBeenCalled();
+    if (change === "reset") input.value = "programmatically reset";
+    else if (change === "ignore")
+      input.setAttribute("data-copilotkit-ignore", "");
+    else input.type = "password";
+    document
+      .querySelector("form")!
+      .dispatchEvent(new Event("submit", { bubbles: true, cancelable: true }));
+    expect(emit.mock.calls.map(([, value]) => value.target.value)).toEqual(
+      change === "reset" ? ["original"] : [],
+    );
+    if (change !== "reset")
+      expect(JSON.stringify(emit.mock.calls)).not.toContain("original");
+    expect(vi.getTimerCount()).toBe(0);
+  },
+);
+
+it("uninstall cancels pending edits and removes flush/composition listeners", () => {
+  const { emit, edit } = inputFixture();
+  edit("first", "pending");
+  expect(emit).not.toHaveBeenCalled();
+  uninstall?.();
+  expect(vi.getTimerCount()).toBe(0);
+  window.dispatchEvent(new Event("click"));
+  window.dispatchEvent(new Event("pagehide"));
+  document
+    .getElementById("first")!
+    .dispatchEvent(new CompositionEvent("compositionend", { bubbles: true }));
+  vi.advanceTimersByTime(1000);
+  expect(emit).not.toHaveBeenCalled();
+});
+
+it.each(["change", "focusout", "other-field"])(
+  "commits text immediately on %s without a duplicate record",
+  (action) => {
+    const { emit, edit } = inputFixture();
+    const input = edit("first", "committed");
+    expect(emit).not.toHaveBeenCalled();
+    if (action === "other-field") edit("second", "next");
+    else input.dispatchEvent(new Event(action, { bubbles: true }));
+    expect(emit.mock.calls.map(([, value]) => value.target.value)).toEqual([
+      "committed",
+    ]);
+    vi.advanceTimersByTime(300);
+    expect(emit.mock.calls.map(([, value]) => value.target.value)).toEqual(
+      action === "other-field" ? ["committed", "next"] : ["committed"],
+    );
+  },
+);
+
+it("does not leak a pending snapshot when a host resets and then marks the field as password", () => {
+  const { emit, edit } = inputFixture(
+    '<input id="first" data-copy="original">',
+  );
+  const input = edit("first", "original");
+  input.value = "reset-value";
+  input.type = "password";
+  window.dispatchEvent(new Event("pagehide"));
+  expect(JSON.stringify(emit.mock.calls)).not.toContain("original");
+  expect(vi.getTimerCount()).toBe(0);
+});
+
+it.each(["text", "password", "checkbox", "select"])(
+  "records a later trusted %s input after the host resets the same value",
+  (type) => {
+    const markup =
+      type === "select"
+        ? '<select id="first"><option value="">Empty</option><option value="same">Same</option></select>'
+        : `<input id="first" type="${type}">`;
+    const { emit, edit } = inputFixture(markup);
+    const field = document.querySelector<HTMLInputElement | HTMLSelectElement>(
+      "#first",
+    )!;
+    for (let occurrence = 0; occurrence < 2; occurrence++) {
+      field.value = "";
+      if (field instanceof HTMLInputElement && type === "checkbox")
+        field.checked = false;
+      if (field instanceof HTMLInputElement && type === "checkbox")
+        field.checked = true;
+      edit("first", "same");
+      vi.advanceTimersByTime(300);
+      edit("first", "same", "change");
+    }
+    expect(emit).toHaveBeenCalledTimes(2);
+    expect(emit.mock.calls.map(([, value]) => value.target.value)).toEqual(
+      type === "password" ? ["[redacted]", "[redacted]"] : ["same", "same"],
+    );
+  },
+);
+
+it.each(["checkbox", "select"])(
+  "does not deduplicate independent %s change events",
+  (type) => {
+    const { emit, edit } = inputFixture(
+      type === "select"
+        ? '<select id="first"><option value="">Empty</option><option value="same">Same</option></select>'
+        : '<input id="first" type="checkbox">',
+    );
+    const field = document.querySelector<HTMLInputElement | HTMLSelectElement>(
+      "#first",
+    )!;
+    for (let occurrence = 0; occurrence < 2; occurrence++) {
+      field.value = "";
+      if (field instanceof HTMLInputElement) field.checked = false;
+      if (field instanceof HTMLInputElement) field.checked = true;
+      edit("first", "same", "change");
+    }
+    expect(emit).toHaveBeenCalledTimes(2);
+    expect(vi.getTimerCount()).toBe(0);
+  },
+);
+
+it("settles redacted input 300 ms after the latest trusted edit", () => {
+  const { emit, edit } = inputFixture('<input id="first" type="password">');
+  edit("first", "first-secret");
+  vi.advanceTimersByTime(200);
+  edit("first", "second-secret");
+  vi.advanceTimersByTime(299);
+  expect(emit).not.toHaveBeenCalled();
+  vi.advanceTimersByTime(1);
+  expect(emit).toHaveBeenCalledOnce();
+  expect(emit.mock.calls[0]?.[1].target.value).toBe("[redacted]");
+  expect(JSON.stringify(emit.mock.calls)).not.toContain("secret");
+});
+
+it.each(["flush", "click", "submit", "focusout", "pagehide"])(
+  "preserves the latest composing input at the %s boundary",
+  (boundary) => {
+    const { emit, capture } = inputFixture();
+    const field = document.querySelector<HTMLInputElement>("#first")!;
+    field.dispatchEvent(
+      new CompositionEvent("compositionstart", { bubbles: true }),
+    );
+    for (const value of ["partial", "latest user text"]) {
+      field.value = value;
+      field.dispatchEvent(
+        new InputEvent("input", { bubbles: true, isComposing: true }),
+      );
+    }
+    vi.advanceTimersByTime(1000);
+    expect(emit).not.toHaveBeenCalled();
+    field.value = "host reset";
+    if (boundary === "flush") capture.flush();
+    else field.dispatchEvent(new Event(boundary, { bubbles: true }));
+    expect(emit.mock.calls.map(([, value]) => value.target.value)).toEqual([
+      "latest user text",
+    ]);
+    expect(vi.getTimerCount()).toBe(0);
+  },
+);
+
+it("does not let a late composing input after compositionend poison the field", () => {
+  const { emit, edit } = inputFixture();
+  const field = document.querySelector<HTMLInputElement>("#first")!;
+  field.dispatchEvent(
+    new CompositionEvent("compositionstart", { bubbles: true }),
+  );
+  field.value = "finished";
+  field.dispatchEvent(
+    new CompositionEvent("compositionend", { bubbles: true }),
+  );
+  field.dispatchEvent(
+    new InputEvent("input", { bubbles: true, isComposing: true }),
+  );
+  vi.advanceTimersByTime(300);
+  expect(emit.mock.calls.map(([, value]) => value.target.value)).toEqual([
+    "finished",
+  ]);
+  edit("first", "next edit");
+  vi.advanceTimersByTime(300);
+  expect(emit.mock.calls.map(([, value]) => value.target.value)).toEqual([
+    "finished",
+    "next edit",
+  ]);
+});
+
+it("flushes trusted Enter before a no-form send handler resets the input", () => {
+  const { emit, edit } = inputFixture();
+  const order: string[] = [];
+  emit.mockImplementation(() => order.push("input"));
+  const field = edit("first", "send this");
+  field.addEventListener("keydown", () => {
+    order.push("send");
+    field.value = "";
+  });
+  field.dispatchEvent(
+    new KeyboardEvent("keydown", { key: "Enter", bubbles: true }),
+  );
+  expect(order).toEqual(["input", "send"]);
+  expect(emit.mock.calls[0]?.[1].target.value).toBe("send this");
+  expect(vi.getTimerCount()).toBe(0);
+});
+
+it.each(["isComposing", "keyCode", "compositionstart"])(
+  "keeps IME Enter from flushing partial text identified by %s",
+  (signal) => {
+    const { emit } = inputFixture();
+    const field = document.querySelector<HTMLInputElement>("#first")!;
+    if (signal === "compositionstart")
+      field.dispatchEvent(
+        new CompositionEvent("compositionstart", { bubbles: true }),
+      );
+    field.value = "partial";
+    field.dispatchEvent(
+      new InputEvent("input", { bubbles: true, isComposing: true }),
+    );
+    field.dispatchEvent(
+      new KeyboardEvent("keydown", {
+        key: "Enter",
+        bubbles: true,
+        isComposing: signal === "isComposing",
+        keyCode: signal === "keyCode" ? 229 : 13,
+      }),
+    );
+    expect(emit).not.toHaveBeenCalled();
+    field.value = "finished";
+    field.dispatchEvent(
+      new CompositionEvent("compositionend", { bubbles: true }),
+    );
+    vi.advanceTimersByTime(300);
+    expect(emit.mock.calls.map(([, value]) => value.target.value)).toEqual([
+      "finished",
+    ]);
+  },
+);
+
+it("ignores IME keydown 229 even after compositionend", () => {
+  const { emit } = inputFixture();
+  const field = document.querySelector<HTMLInputElement>("#first")!;
+  field.dispatchEvent(
+    new CompositionEvent("compositionstart", { bubbles: true }),
+  );
+  field.value = "finished";
+  field.dispatchEvent(
+    new CompositionEvent("compositionend", { bubbles: true }),
+  );
+  field.dispatchEvent(
+    new KeyboardEvent("keydown", { key: "Enter", keyCode: 229, bubbles: true }),
+  );
+  expect(emit).not.toHaveBeenCalled();
+  vi.advanceTimersByTime(299);
+  expect(emit).not.toHaveBeenCalled();
+  vi.advanceTimersByTime(1);
+  expect(emit.mock.calls.map(([, value]) => value.target.value)).toEqual([
+    "finished",
+  ]);
+});
+
+it.each(["untrusted Enter", "ordinary key"])(
+  "does not flush on %s",
+  (action) => {
+    vi.useFakeTimers();
+    document.body.innerHTML = '<input id="first">';
+    const emit = vi.fn();
+    uninstall = installInputCapture({
+      emit,
+      isTrusted: (event) =>
+        event.type !== "keydown" || action === "ordinary key",
+    });
+    const field = document.querySelector<HTMLInputElement>("#first")!;
+    field.value = "pending";
+    field.dispatchEvent(new InputEvent("input", { bubbles: true }));
+    field.dispatchEvent(
+      new KeyboardEvent("keydown", {
+        key: action === "ordinary key" ? "a" : "Enter",
+        bubbles: true,
+      }),
+    );
+    expect(emit).not.toHaveBeenCalled();
+    vi.advanceTimersByTime(300);
+    expect(emit.mock.calls.map(([, value]) => value.target.value)).toEqual([
+      "pending",
+    ]);
+  },
+);
+
+it("rechecks redaction when explicitly flushing a composing snapshot", () => {
+  vi.useFakeTimers();
+  document.body.innerHTML =
+    '<input id="first" data-copy="new-secret"><input id="password" type="password">';
+  const redact = createRedactor();
+  const emit = vi.fn();
+  const capture = installInputCapture({ emit, redact, isTrusted: () => true });
+  uninstall = capture;
+  const field = document.querySelector<HTMLInputElement>("#first")!;
+  field.dispatchEvent(
+    new CompositionEvent("compositionstart", { bubbles: true }),
+  );
+  field.value = "safe text";
+  field.dispatchEvent(
+    new InputEvent("input", { bubbles: true, isComposing: true }),
+  );
+  const password = document.querySelector<HTMLInputElement>("#password")!;
+  password.value = "new-secret";
+  redact.isPassword(password);
+  capture.flush();
+  expect(emit).toHaveBeenCalledOnce();
+  expect(emit.mock.calls[0]?.[1].target.attributes["data-copy"]).toBe(
+    "[redacted]",
+  );
+  expect(JSON.stringify(emit.mock.calls)).not.toContain("new-secret");
+});
+
+it("does not add the click label to input events", () => {
+  const { emit, edit } = inputFixture(
+    '<input id="first" aria-label="Customer name">',
+  );
+  edit("first", "Jane", "change");
+  expect(emit).toHaveBeenCalledOnce();
+  expect(emit.mock.calls[0]?.[1].target).not.toHaveProperty("label");
+});

package/src/__tests__/redact.test.ts

@@ -360,10 +360,10 @@ describe("password-like fields", () => {
     input.setAttribute("value", "toggle-secret-2");
     type(input, "toggle-secret-2");
     input.click();
-    expect(other.map(({ name }) => name)).toEqual(["input", "input", "click"]);
+    expect(other.map(({ name }) => name)).toEqual(["input", "click"]);
     for (const { value } of other)
       expect(value.target).toMatchObject({ value: "[redacted]" });
-    expect(other[2]!.value.target).toMatchObject({
+    expect(other[1]!.value.target).toMatchObject({
       attributes: { value: "[redacted]" },
     });
     expect(JSON.stringify(other)).not.toContain("toggle-secret");
@@ -375,6 +375,7 @@ describe("password-like fields", () => {
       document.body.innerHTML = `<input type="text" autocomplete="${autocomplete}">`;
       const { other } = setup();
       type(document.querySelector("input")!, "autocomplete-secret");
+      window.dispatchEvent(new Event("pagehide"));
       expect(other[0]!.value.target).toMatchObject({ value: "[redacted]" });
     },
   );
@@ -383,6 +384,7 @@ describe("password-like fields", () => {
     document.body.innerHTML = '<input name="email" type="email">';
     const { other } = setup();
     type(document.querySelector("input")!, "alice@example.com");
+    window.dispatchEvent(new Event("pagehide"));
     expect(other[0]!.value.target).toMatchObject({
       value: "alice@example.com",
     });