@runtypelabs/persona 4.4.2 → 4.6.0

package/src/ui.scroll.test.ts

@@ -912,9 +912,12 @@ describe("createAgentExperience streaming scroll", () => {
   it("re-sticks to the bottom when the user sends a message after scrolling up", () => {
     const raf = installRafMock();
     const mount = createMount();
+    // Follow-specific: a user send re-sticks to the bottom (anchor-top, the
+    // default, would pin the sent message near the top instead).
     const controller = createAgentExperience(mount, {
       apiUrl: "https://api.example.com/chat",
-      launcher: { enabled: false }
+      launcher: { enabled: false },
+      features: { scrollBehavior: { mode: "follow" } }
     });
 
     const scrollContainer = mount.querySelector<HTMLElement>("#persona-scroll-container");
@@ -941,9 +944,12 @@ describe("createAgentExperience streaming scroll", () => {
   it("shows a count badge for messages that arrive while paused", () => {
     const raf = installRafMock();
     const mount = createMount();
+    // Follow-specific paused-badge semantics (wheel-up pauses auto-follow, then
+    // a message arrives while paused and below the fold).
     const controller = createAgentExperience(mount, {
       apiUrl: "https://api.example.com/chat",
-      launcher: { enabled: false }
+      launcher: { enabled: false },
+      features: { scrollBehavior: { mode: "follow" } }
     });
 
     const scrollContainer = mount.querySelector<HTMLElement>("#persona-scroll-container");

package/src/ui.stream-animation-update.test.ts

@@ -0,0 +1,99 @@
+// @vitest-environment jsdom
+
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+import { createAgentExperience } from "./ui";
+import {
+  registerStreamAnimationPlugin,
+  unregisterStreamAnimationPlugin,
+} from "./utils/stream-animation";
+import type { StreamAnimationPlugin } from "./types";
+
+// A plugin animation carries its own CSS (built-in animations live in
+// widget.css). Plugin styles are injected only via ensurePluginActive, which the
+// initial mount runs but controller.update() historically skipped — so switching
+// to a plugin animation live used to set the type without ever injecting the CSS.
+const TEST_PLUGIN: StreamAnimationPlugin = {
+  name: "test-reveal",
+  containerClass: "test-reveal-stream",
+  wrap: "char",
+  styles: ".test-reveal-stream .persona-stream-char { opacity: 0; }",
+};
+
+const createMount = () => {
+  const mount = document.createElement("div");
+  document.body.appendChild(mount);
+  return mount;
+};
+
+const styleTag = (mount: HTMLElement) =>
+  mount.querySelector('style[data-persona-animation="test-reveal"]');
+
+describe("createAgentExperience: stream-animation plugin activation on update()", () => {
+  beforeEach(() => {
+    vi.stubGlobal("requestAnimationFrame", (cb: (time: number) => void) => {
+      cb(0);
+      return 1;
+    });
+    vi.stubGlobal("cancelAnimationFrame", () => {});
+    window.scrollTo = vi.fn();
+    registerStreamAnimationPlugin(TEST_PLUGIN);
+  });
+
+  afterEach(() => {
+    unregisterStreamAnimationPlugin("test-reveal");
+    document.body.innerHTML = "";
+    vi.restoreAllMocks();
+  });
+
+  it("injects a plugin animation's styles when switched in via update()", () => {
+    const mount = createMount();
+    const controller = createAgentExperience(mount, {
+      apiUrl: "https://api.example.com/chat",
+      launcher: { enabled: false },
+      features: { streamAnimation: { type: "none" } },
+    });
+
+    // Nothing injected while the type is "none".
+    expect(styleTag(mount)).toBeNull();
+
+    controller.update({
+      features: { streamAnimation: { type: "test-reveal" } },
+    });
+
+    // The plugin's <style> is now present, so the animation can actually render.
+    expect(styleTag(mount)).not.toBeNull();
+
+    controller.destroy();
+  });
+
+  it("activates the plugin at mount when configured up front", () => {
+    const mount = createMount();
+    const controller = createAgentExperience(mount, {
+      apiUrl: "https://api.example.com/chat",
+      launcher: { enabled: false },
+      features: { streamAnimation: { type: "test-reveal" } },
+    });
+
+    expect(styleTag(mount)).not.toBeNull();
+    controller.destroy();
+  });
+
+  it("does not duplicate the style tag when the same plugin is re-selected", () => {
+    const mount = createMount();
+    const controller = createAgentExperience(mount, {
+      apiUrl: "https://api.example.com/chat",
+      launcher: { enabled: false },
+      features: { streamAnimation: { type: "test-reveal" } },
+    });
+
+    controller.update({ features: { streamAnimation: { type: "none" } } });
+    controller.update({ features: { streamAnimation: { type: "test-reveal" } } });
+
+    expect(
+      mount.querySelectorAll('style[data-persona-animation="test-reveal"]'),
+    ).toHaveLength(1);
+
+    controller.destroy();
+  });
+});