@perspective-ai/sdk 1.0.0-alpha.2

package/src/slider.test.ts

@@ -0,0 +1,277 @@
+import { describe, it, expect, beforeEach, afterEach, vi } from "vitest";
+import { openSlider } from "./slider";
+import * as config from "./config";
+
+describe("openSlider", () => {
+  beforeEach(() => {
+    document.body.innerHTML = "";
+  });
+
+  afterEach(() => {
+    document.body.innerHTML = "";
+    vi.restoreAllMocks();
+  });
+
+  it("creates slider with backdrop", () => {
+    const handle = openSlider({
+      researchId: "test-research-id",
+    });
+
+    expect(handle.researchId).toBe("test-research-id");
+    expect(handle.type).toBe("slider");
+    expect(handle.iframe).toBeInstanceOf(HTMLIFrameElement);
+    expect(document.querySelector(".perspective-slider")).toBeTruthy();
+    expect(document.querySelector(".perspective-slider-backdrop")).toBeTruthy();
+
+    handle.unmount();
+  });
+
+  it("creates loading indicator", () => {
+    const handle = openSlider({
+      researchId: "test-research-id",
+    });
+
+    const loading = document.querySelector(".perspective-loading");
+    expect(loading).toBeTruthy();
+
+    handle.unmount();
+  });
+
+  it("returns no-op handle when no DOM", () => {
+    vi.spyOn(config, "hasDom").mockReturnValue(false);
+
+    const handle = openSlider({
+      researchId: "test-research-id",
+    });
+
+    expect(handle.iframe).toBeNull();
+    expect(handle.container).toBeNull();
+    expect(handle.unmount).toBeInstanceOf(Function);
+    expect(() => handle.unmount()).not.toThrow();
+  });
+
+  it("unmount removes slider and backdrop", () => {
+    const handle = openSlider({
+      researchId: "test-research-id",
+    });
+
+    expect(document.querySelector(".perspective-slider")).toBeTruthy();
+    expect(document.querySelector(".perspective-slider-backdrop")).toBeTruthy();
+
+    handle.unmount();
+
+    expect(document.querySelector(".perspective-slider")).toBeFalsy();
+    expect(document.querySelector(".perspective-slider-backdrop")).toBeFalsy();
+  });
+
+  it("destroy is alias for unmount", () => {
+    const handle = openSlider({
+      researchId: "test-research-id",
+    });
+
+    expect(document.querySelector(".perspective-slider")).toBeTruthy();
+
+    handle.destroy();
+
+    expect(document.querySelector(".perspective-slider")).toBeFalsy();
+  });
+
+  it("closes on close button click", () => {
+    const onClose = vi.fn();
+    openSlider({
+      researchId: "test-research-id",
+      onClose,
+    });
+
+    const closeBtn = document.querySelector(
+      ".perspective-slider .perspective-close"
+    ) as HTMLButtonElement;
+    expect(closeBtn).toBeTruthy();
+
+    closeBtn.click();
+
+    expect(document.querySelector(".perspective-slider")).toBeFalsy();
+    expect(onClose).toHaveBeenCalled();
+  });
+
+  it("closes on backdrop click", () => {
+    const onClose = vi.fn();
+    openSlider({
+      researchId: "test-research-id",
+      onClose,
+    });
+
+    const backdrop = document.querySelector(
+      ".perspective-slider-backdrop"
+    ) as HTMLElement;
+    expect(backdrop).toBeTruthy();
+
+    backdrop.click();
+
+    expect(document.querySelector(".perspective-slider")).toBeFalsy();
+    expect(onClose).toHaveBeenCalled();
+  });
+
+  it("closes on Escape key", () => {
+    const onClose = vi.fn();
+    openSlider({
+      researchId: "test-research-id",
+      onClose,
+    });
+
+    expect(document.querySelector(".perspective-slider")).toBeTruthy();
+
+    document.dispatchEvent(new KeyboardEvent("keydown", { key: "Escape" }));
+
+    expect(document.querySelector(".perspective-slider")).toBeFalsy();
+    expect(onClose).toHaveBeenCalled();
+  });
+
+  it("only closes once on multiple triggers", () => {
+    const onClose = vi.fn();
+    const handle = openSlider({
+      researchId: "test-research-id",
+      onClose,
+    });
+
+    handle.unmount();
+    handle.unmount();
+    handle.unmount();
+
+    expect(onClose).toHaveBeenCalledTimes(1);
+  });
+
+  it("applies theme class", () => {
+    const handle = openSlider({
+      researchId: "test-research-id",
+      theme: "dark",
+    });
+
+    const slider = document.querySelector(".perspective-slider");
+    expect(slider?.classList.contains("perspective-dark-theme")).toBe(true);
+
+    handle.unmount();
+  });
+
+  it("uses custom host", () => {
+    const handle = openSlider({
+      researchId: "test-research-id",
+      host: "https://custom.example.com",
+    });
+
+    const iframe = handle.iframe as HTMLIFrameElement;
+    expect(iframe.src).toContain("https://custom.example.com");
+
+    handle.unmount();
+  });
+
+  it("update modifies config", () => {
+    const onSubmit1 = vi.fn();
+    const onSubmit2 = vi.fn();
+
+    const handle = openSlider({
+      researchId: "test-research-id",
+      onSubmit: onSubmit1,
+    });
+
+    expect(() => handle.update({ onSubmit: onSubmit2 })).not.toThrow();
+
+    handle.unmount();
+  });
+
+  describe("update() behavior", () => {
+    const host = "https://getperspective.ai";
+    const researchId = "test-research-id";
+
+    const sendMessage = (
+      iframe: HTMLIFrameElement,
+      type: string,
+      extra?: Record<string, unknown>
+    ) => {
+      window.dispatchEvent(
+        new MessageEvent("message", {
+          data: { type, researchId, ...extra },
+          origin: host,
+          source: iframe.contentWindow,
+        })
+      );
+    };
+
+    it("update changes which callback is invoked", () => {
+      const onSubmit1 = vi.fn();
+      const onSubmit2 = vi.fn();
+
+      const handle = openSlider({
+        researchId,
+        host,
+        onSubmit: onSubmit1,
+      });
+
+      handle.update({ onSubmit: onSubmit2 });
+
+      sendMessage(handle.iframe!, "perspective:submit");
+
+      expect(onSubmit2).toHaveBeenCalledTimes(1);
+      expect(onSubmit1).not.toHaveBeenCalled();
+
+      handle.unmount();
+    });
+
+    it("sequential updates only use latest callback", () => {
+      const fn1 = vi.fn();
+      const fn2 = vi.fn();
+      const fn3 = vi.fn();
+
+      const handle = openSlider({
+        researchId,
+        host,
+        onSubmit: fn1,
+      });
+
+      handle.update({ onSubmit: fn2 });
+      handle.update({ onSubmit: fn3 });
+
+      sendMessage(handle.iframe!, "perspective:submit");
+
+      expect(fn3).toHaveBeenCalledTimes(1);
+      expect(fn2).not.toHaveBeenCalled();
+      expect(fn1).not.toHaveBeenCalled();
+
+      handle.unmount();
+    });
+
+    it("destroy prevents further callback invocations", () => {
+      const onSubmit = vi.fn();
+      const onClose = vi.fn();
+
+      const handle = openSlider({
+        researchId,
+        host,
+        onSubmit,
+        onClose,
+      });
+
+      const iframe = handle.iframe!;
+
+      handle.unmount();
+      expect(onClose).toHaveBeenCalledTimes(1);
+
+      sendMessage(iframe, "perspective:submit");
+      sendMessage(iframe, "perspective:close");
+
+      expect(onSubmit).not.toHaveBeenCalled();
+      expect(onClose).toHaveBeenCalledTimes(1);
+    });
+
+    it("update after destroy is safe (no-op)", () => {
+      const handle = openSlider({
+        researchId,
+        host,
+      });
+
+      handle.unmount();
+
+      expect(() => handle.update({ onSubmit: vi.fn() })).not.toThrow();
+    });
+  });
+});

package/src/slider.ts

@@ -0,0 +1,158 @@
+/**
+ * Slider/drawer embed - slides in from the right
+ * SSR-safe - returns no-op handle on server
+ */
+
+import type { EmbedConfig, EmbedHandle } from "./types";
+import { hasDom, getHost } from "./config";
+import {
+  createIframe,
+  setupMessageListener,
+  registerIframe,
+  ensureGlobalListeners,
+} from "./iframe";
+import { createLoadingIndicator } from "./loading";
+import { injectStyles, CLOSE_ICON } from "./styles";
+import { cn, getThemeClass } from "./utils";
+
+function createNoOpHandle(researchId: string): EmbedHandle {
+  return {
+    unmount: () => {},
+    update: () => {},
+    destroy: () => {},
+    researchId,
+    type: "slider",
+    iframe: null,
+    container: null,
+  };
+}
+
+export function openSlider(config: EmbedConfig): EmbedHandle {
+  const { researchId } = config;
+
+  // SSR safety: return no-op handle
+  if (!hasDom()) {
+    return createNoOpHandle(researchId);
+  }
+  const host = getHost(config.host);
+
+  injectStyles();
+  ensureGlobalListeners();
+
+  // Create backdrop
+  const backdrop = document.createElement("div");
+  backdrop.className = cn(
+    "perspective-slider-backdrop perspective-embed-root",
+    getThemeClass(config.theme)
+  );
+
+  // Create slider container
+  const slider = document.createElement("div");
+  slider.className = cn(
+    "perspective-slider perspective-embed-root",
+    getThemeClass(config.theme)
+  );
+
+  // Create close button
+  const closeBtn = document.createElement("button");
+  closeBtn.className = "perspective-close";
+  closeBtn.innerHTML = CLOSE_ICON;
+  closeBtn.setAttribute("aria-label", "Close");
+
+  // Create loading indicator with theme and brand colors
+  const loading = createLoadingIndicator({
+    theme: config.theme,
+    brand: config.brand,
+  });
+
+  // Create iframe (hidden initially)
+  const iframe = createIframe(
+    researchId,
+    "slider",
+    host,
+    config.params,
+    config.brand,
+    config.theme
+  );
+  iframe.style.opacity = "0";
+  iframe.style.transition = "opacity 0.3s ease";
+
+  slider.appendChild(closeBtn);
+  slider.appendChild(loading);
+  slider.appendChild(iframe);
+  document.body.appendChild(backdrop);
+  document.body.appendChild(slider);
+
+  // Mutable config reference for updates
+  let currentConfig = { ...config };
+  let isOpen = true;
+  let messageCleanup: (() => void) | null = null;
+
+  // Register iframe for theme change notifications
+  const unregisterIframe = registerIframe(iframe, host);
+
+  const destroy = () => {
+    if (!isOpen) return;
+    isOpen = false;
+    messageCleanup?.();
+    unregisterIframe();
+    slider.remove();
+    backdrop.remove();
+    document.removeEventListener("keydown", escHandler);
+    currentConfig.onClose?.();
+  };
+
+  // Set up message listener with loading state handling
+  messageCleanup = setupMessageListener(
+    researchId,
+    {
+      get onReady() {
+        return () => {
+          loading.style.opacity = "0";
+          iframe.style.opacity = "1";
+          setTimeout(() => loading.remove(), 300);
+          currentConfig.onReady?.();
+        };
+      },
+      get onSubmit() {
+        return currentConfig.onSubmit;
+      },
+      get onNavigate() {
+        return currentConfig.onNavigate;
+      },
+      get onClose() {
+        return destroy;
+      },
+      get onError() {
+        return currentConfig.onError;
+      },
+    },
+    iframe,
+    host,
+    { skipResize: true }
+  );
+
+  // Close handlers
+  closeBtn.addEventListener("click", destroy);
+  backdrop.addEventListener("click", destroy);
+
+  // ESC key closes
+  const escHandler = (e: KeyboardEvent) => {
+    if (e.key === "Escape") {
+      destroy();
+    }
+  };
+  document.addEventListener("keydown", escHandler);
+
+  return {
+    unmount: destroy,
+    update: (options: Parameters<EmbedHandle["update"]>[0]) => {
+      currentConfig = { ...currentConfig, ...options };
+    },
+    destroy,
+    researchId,
+    type: "slider" as const,
+    iframe,
+    container: slider,
+  };
+}