polymorph-sdk 0.2.2 → 0.2.4

package/src/WidgetPanel.tsx

@@ -1,11 +1,17 @@
 import type { Room } from "livekit-client";
-import { useCallback, useState } from "react";
+import { useCallback, useRef, useState } from "react";
 import { ChatThread } from "./ChatThread";
+import { IdentityForm } from "./IdentityForm";
 import styles from "./styles.module.css";
-import type { ChatMessage, SessionStatus, WidgetConfig } from "./types";
+import type {
+  ChatMessage,
+  IdentityCollection,
+  ResolvedWidgetConfig,
+  SessionStatus,
+  WidgetUser,
+} from "./types";
 import { VoiceOverlay } from "./VoiceOverlay";
 
-// Internal SVG icons (no @tabler dependency)
 function MicIcon() {
   return (
     <svg
@@ -19,6 +25,7 @@ function MicIcon() {
       strokeLinecap="round"
       strokeLinejoin="round"
     >
+      <title>Microphone on</title>
       <path d="M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z" />
       <path d="M19 10v2a7 7 0 0 1-14 0v-2" />
       <line x1="12" x2="12" y1="19" y2="22" />
@@ -38,6 +45,7 @@ function MicOffIcon() {
       strokeLinecap="round"
       strokeLinejoin="round"
     >
+      <title>Microphone off</title>
       <line x1="2" x2="22" y1="2" y2="22" />
       <path d="M18.89 13.23A7.12 7.12 0 0 0 19 12v-2" />
       <path d="M5 10v2a7 7 0 0 0 12 5" />
@@ -60,6 +68,7 @@ function SendIcon() {
       strokeLinecap="round"
       strokeLinejoin="round"
     >
+      <title>Send</title>
       <path d="m22 2-7 20-4-9-9-4Z" />
       <path d="M22 2 11 13" />
     </svg>
@@ -78,6 +87,7 @@ function CloseIcon() {
       strokeLinecap="round"
       strokeLinejoin="round"
     >
+      <title>Close</title>
       <path d="M18 6 6 18" />
       <path d="m6 6 12 12" />
     </svg>
@@ -85,40 +95,51 @@ function CloseIcon() {
 }
 
 interface WidgetPanelProps {
-  config: WidgetConfig;
   session: {
     status: SessionStatus;
     roomConnection: { token: string; livekitUrl: string } | null;
     messages: ChatMessage[];
     isVoiceEnabled: boolean;
     isMicActive: boolean;
+    isScreenSharing: boolean;
+    hasObserver: boolean;
     error: string | null;
+    needsIdentityForm: boolean;
+    identityCollection: IdentityCollection | null;
+    resolvedConfig: ResolvedWidgetConfig | null;
     connect: () => Promise<void>;
     disconnect: () => void;
     addMessage: (
       role: "user" | "agent",
       text: string,
       source: "chat" | "voice",
+      senderName?: string,
+      senderType?: "human",
     ) => void;
     sendMessage: (text: string) => void;
     toggleMic: () => void;
     toggleVoice: () => void;
+    toggleScreenShare: () => void;
     setRoom: (room: Room | null) => void;
+    setUser: (user: WidgetUser) => void;
   };
   onClose: () => void;
+  hidden?: boolean;
 }
 
-export function WidgetPanel({ config, session, onClose }: WidgetPanelProps) {
+export function WidgetPanel({ session, onClose, hidden }: WidgetPanelProps) {
   const [inputValue, setInputValue] = useState("");
-  const primaryColor = config.branding?.primaryColor || "#171717";
-  const isChatOnlyAgent = (config.agentName || "")
-    .toLowerCase()
-    .includes("chat-agent");
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+  const rc = session.resolvedConfig;
+  const primaryColor = rc?.primaryColor || "#171717";
+  const showVoice = rc?.enableVoice !== false;
 
   const handleSend = useCallback(() => {
     if (!inputValue.trim()) return;
     session.sendMessage(inputValue);
     setInputValue("");
+    const el = textareaRef.current;
+    if (el) el.style.height = "auto";
   }, [inputValue, session]);
 
   const handleKeyDown = useCallback(
@@ -131,15 +152,24 @@ export function WidgetPanel({ config, session, onClose }: WidgetPanelProps) {
     [handleSend],
   );
 
+  const handleInput = useCallback(() => {
+    const el = textareaRef.current;
+    if (!el) return;
+    el.style.height = "auto";
+    el.style.height = `${el.scrollHeight}px`;
+  }, []);
+
   return (
-    <div className={styles.panel}>
-      {/* Header */}
+    <div
+      className={`${styles.panel} ${hidden ? styles.panelHidden : ""}`}
+      aria-hidden={hidden}
+    >
       <div className={styles.header}>
         <div>
           <div style={{ fontWeight: 500, fontSize: 16 }}>
-            {config.branding?.title || "Hi there"}
+            {rc?.title || "Hi there"}
           </div>
-          {config.branding?.subtitle && (
+          {rc?.subtitle && (
             <div
               style={{
                 fontSize: 13,
@@ -147,7 +177,7 @@ export function WidgetPanel({ config, session, onClose }: WidgetPanelProps) {
                 marginTop: 2,
               }}
             >
-              {config.branding.subtitle}
+              {rc.subtitle}
             </div>
           )}
         </div>
@@ -155,73 +185,72 @@ export function WidgetPanel({ config, session, onClose }: WidgetPanelProps) {
           <CloseIcon />
         </button>
       </div>
-
-      {/* Chat Thread */}
-      <ChatThread
-        messages={session.messages}
-        primaryColor={primaryColor}
-        status={session.status}
-      />
-
-      {/* Voice Overlay */}
-      {!isChatOnlyAgent && (
-        <VoiceOverlay
-          isVoiceEnabled={session.isVoiceEnabled}
-          isMicActive={session.isMicActive}
-          status={session.status}
-          onToggleVoice={session.toggleVoice}
+      {session.needsIdentityForm && session.identityCollection ? (
+        <IdentityForm
+          collectEmail={session.identityCollection.collectEmail}
+          collectPhone={session.identityCollection.collectPhone}
+          primaryColor={primaryColor}
+          onSubmit={session.setUser}
         />
-      )}
-
-      {/* Error */}
-      {session.error && <div className={styles.errorText}>{session.error}</div>}
-
-      {/* Connect button or Input bar */}
-      {session.status === "idle" || session.status === "error" ? (
-        <button
-          type="button"
-          className={styles.connectButton}
-          style={{ backgroundColor: primaryColor }}
-          onClick={session.connect}
-        >
-          Start conversation
-        </button>
-      ) : session.status === "connecting" ? (
-        <button
-          type="button"
-          className={styles.connectButton}
-          style={{ backgroundColor: primaryColor }}
-          disabled
-        >
-          Connecting...
-        </button>
       ) : (
-        <div className={styles.inputBar}>
-          <input
-            className={styles.inputField}
-            placeholder="Type a message..."
-            value={inputValue}
-            onChange={(e) => setInputValue(e.target.value)}
-            onKeyDown={handleKeyDown}
+        <>
+          <ChatThread
+            messages={session.messages}
+            primaryColor={primaryColor}
+            status={session.status}
           />
-          <button
-            type="button"
-            className={styles.iconButton}
-            onClick={handleSend}
-            disabled={!inputValue.trim()}
-          >
-            <SendIcon />
-          </button>
-          {session.isVoiceEnabled && !isChatOnlyAgent && (
+          {(showVoice || session.hasObserver) && (
+            <VoiceOverlay
+              isVoiceEnabled={session.isVoiceEnabled}
+              isMicActive={session.isMicActive}
+              isScreenSharing={session.isScreenSharing}
+              status={session.status}
+              onToggleVoice={session.toggleVoice}
+              onToggleScreenShare={session.toggleScreenShare}
+              showScreenShare={session.hasObserver}
+            />
+          )}
+          {session.error && (
+            <div className={styles.errorText}>{session.error}</div>
+          )}
+          <div className={styles.inputBar}>
+            <textarea
+              ref={textareaRef}
+              className={styles.inputField}
+              placeholder={
+                session.status === "connecting"
+                  ? "Connecting..."
+                  : "Type a message..."
+              }
+              value={inputValue}
+              onChange={(e) => setInputValue(e.target.value)}
+              onInput={handleInput}
+              onKeyDown={handleKeyDown}
+              disabled={session.status === "connecting"}
+              rows={1}
+            />
             <button
               type="button"
-              className={`${styles.iconButton} ${session.isMicActive ? styles.iconButtonActive : ""}`}
-              onClick={session.toggleMic}
+              className={styles.iconButton}
+              onClick={handleSend}
+              disabled={!inputValue.trim() || session.status === "connecting"}
             >
-              {session.isMicActive ? <MicIcon /> : <MicOffIcon />}
+              <SendIcon />
             </button>
-          )}
-        </div>
+            {session.isVoiceEnabled &&
+              showVoice &&
+              session.status === "connected" && (
+                <button
+                  type="button"
+                  className={`${styles.iconButton} ${session.isMicActive ? styles.iconButtonActive : ""}`}
+                  onClick={session.toggleMic}
+                  title={session.isMicActive ? "Mute mic" : "Unmute mic"}
+                >
+                  {session.isMicActive ? <MicIcon /> : <MicOffIcon />}
+                </button>
+              )}
+          </div>
+        </>
       )}
     </div>
   );

package/src/__tests__/IdentityForm.test.tsx

@@ -0,0 +1,146 @@
+import { cleanup, fireEvent, render, screen } from "@testing-library/react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { IdentityForm } from "../IdentityForm";
+
+afterEach(() => {
+  cleanup();
+});
+
+function renderForm(
+  overrides: {
+    collectEmail?: "required" | "optional" | "hidden";
+    collectPhone?: "required" | "optional" | "hidden";
+    onSubmit?: (u: { name?: string; email?: string; phone?: string }) => void;
+  } = {},
+) {
+  const onSubmit = overrides.onSubmit ?? vi.fn();
+  render(
+    <IdentityForm
+      collectEmail={overrides.collectEmail ?? "hidden"}
+      collectPhone={overrides.collectPhone ?? "hidden"}
+      primaryColor="#000"
+      onSubmit={onSubmit}
+    />,
+  );
+  return { onSubmit };
+}
+
+describe("IdentityForm", () => {
+  // ── Rendering ──
+
+  it("always shows a name field", () => {
+    renderForm();
+    expect(screen.getByPlaceholderText("Your name")).toBeInTheDocument();
+  });
+
+  it("shows email field when collectEmail is not hidden", () => {
+    renderForm({ collectEmail: "required" });
+    expect(screen.getByPlaceholderText("you@example.com")).toBeInTheDocument();
+  });
+
+  it("hides email field when collectEmail is hidden", () => {
+    renderForm({ collectEmail: "hidden" });
+    expect(
+      screen.queryByPlaceholderText("you@example.com"),
+    ).not.toBeInTheDocument();
+  });
+
+  it("shows phone field when collectPhone is not hidden", () => {
+    renderForm({ collectPhone: "optional" });
+    expect(
+      screen.getByPlaceholderText("+1 (555) 123-4567"),
+    ).toBeInTheDocument();
+  });
+
+  it("hides phone field when collectPhone is hidden", () => {
+    renderForm({ collectPhone: "hidden" });
+    expect(
+      screen.queryByPlaceholderText("+1 (555) 123-4567"),
+    ).not.toBeInTheDocument();
+  });
+
+  // ── Validation ──
+
+  it("shows error and does not call onSubmit when name is empty", () => {
+    const { onSubmit } = renderForm();
+    fireEvent.click(screen.getByRole("button", { name: "Start Chat" }));
+    expect(screen.getByText("Name is required")).toBeInTheDocument();
+    expect(onSubmit).not.toHaveBeenCalled();
+  });
+
+  it("shows error when required email is missing", () => {
+    const { onSubmit } = renderForm({ collectEmail: "required" });
+    fireEvent.change(screen.getByPlaceholderText("Your name"), {
+      target: { value: "Jane" },
+    });
+    fireEvent.click(screen.getByRole("button", { name: "Start Chat" }));
+    expect(screen.getByText("Email is required")).toBeInTheDocument();
+    expect(onSubmit).not.toHaveBeenCalled();
+  });
+
+  it("shows error for invalid email format", () => {
+    const { onSubmit } = renderForm({ collectEmail: "optional" });
+    fireEvent.change(screen.getByPlaceholderText("Your name"), {
+      target: { value: "Jane" },
+    });
+    fireEvent.change(screen.getByPlaceholderText("you@example.com"), {
+      target: { value: "not-an-email" },
+    });
+    // Use fireEvent.submit to bypass native <input type="email"> validation in jsdom
+    fireEvent.submit(
+      screen.getByRole("button", { name: "Start Chat" }).closest("form")!,
+    );
+    expect(screen.getByText("Invalid email format")).toBeInTheDocument();
+    expect(onSubmit).not.toHaveBeenCalled();
+  });
+
+  it("shows error for invalid phone number (too few digits)", () => {
+    const { onSubmit } = renderForm({ collectPhone: "optional" });
+    fireEvent.change(screen.getByPlaceholderText("Your name"), {
+      target: { value: "Jane" },
+    });
+    fireEvent.change(screen.getByPlaceholderText("+1 (555) 123-4567"), {
+      target: { value: "123" },
+    });
+    fireEvent.click(screen.getByRole("button", { name: "Start Chat" }));
+    expect(
+      screen.getByText("Enter a valid phone number (7–15 digits)"),
+    ).toBeInTheDocument();
+    expect(onSubmit).not.toHaveBeenCalled();
+  });
+
+  it("shows error when both optional and neither provided", () => {
+    const { onSubmit } = renderForm({
+      collectEmail: "optional",
+      collectPhone: "optional",
+    });
+    fireEvent.change(screen.getByPlaceholderText("Your name"), {
+      target: { value: "Jane" },
+    });
+    fireEvent.click(screen.getByRole("button", { name: "Start Chat" }));
+    expect(
+      screen.getByText("Please provide either an email or phone number"),
+    ).toBeInTheDocument();
+    expect(onSubmit).not.toHaveBeenCalled();
+  });
+
+  it("calls onSubmit with valid data", () => {
+    const onSubmit = vi.fn();
+    renderForm({
+      collectEmail: "optional",
+      collectPhone: "hidden",
+      onSubmit,
+    });
+    fireEvent.change(screen.getByPlaceholderText("Your name"), {
+      target: { value: "Jane" },
+    });
+    fireEvent.change(screen.getByPlaceholderText("you@example.com"), {
+      target: { value: "jane@test.com" },
+    });
+    fireEvent.click(screen.getByRole("button", { name: "Start Chat" }));
+    expect(onSubmit).toHaveBeenCalledWith({
+      name: "Jane",
+      email: "jane@test.com",
+    });
+  });
+});

package/src/__tests__/PolymorphWidget.test.tsx

@@ -0,0 +1,173 @@
+import {
+  cleanup,
+  fireEvent,
+  render,
+  screen,
+  waitFor,
+} from "@testing-library/react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { PolymorphWidget } from "../PolymorphWidget";
+
+// Mock LiveKitRoom to avoid real WebSocket connections
+vi.mock("@livekit/components-react", () => ({
+  LiveKitRoom: ({ children }: { children: React.ReactNode }) => (
+    <div>{children}</div>
+  ),
+}));
+
+vi.mock("../RoomHandler", () => ({
+  RoomHandler: () => null,
+}));
+
+// Mock MantineProvider to avoid jsdom getComputedStyle issues
+vi.mock("@mantine/core", async () => {
+  const actual = await vi.importActual("@mantine/core");
+  return {
+    ...actual,
+    MantineProvider: ({ children }: { children: React.ReactNode }) => (
+      <>{children}</>
+    ),
+  };
+});
+
+const RESOLVE_RESPONSE = {
+  id: "cfg-1",
+  title: "Widget Title",
+  subtitle: "Widget Subtitle",
+  primary_color: "#ff0000",
+  position: "bottom-right",
+  dark_mode: false,
+  enable_voice: true,
+  greeting: "Welcome!",
+  collect_email: "hidden",
+  collect_phone: "hidden",
+};
+
+let fetchMock: ReturnType<typeof vi.fn>;
+
+beforeEach(() => {
+  fetchMock = vi.fn().mockImplementation((url: string) => {
+    if (url.includes("/widget-configs/resolve")) {
+      return Promise.resolve({
+        ok: true,
+        json: () => Promise.resolve(RESOLVE_RESPONSE),
+      });
+    }
+    return Promise.resolve({
+      ok: false,
+      status: 404,
+      text: () => Promise.resolve(""),
+    });
+  });
+  vi.stubGlobal("fetch", fetchMock);
+  sessionStorage.clear();
+  localStorage.clear();
+});
+
+afterEach(() => {
+  cleanup();
+  vi.restoreAllMocks();
+});
+
+describe("PolymorphWidget", () => {
+  it("renders FAB button on mount", () => {
+    render(<PolymorphWidget apiBaseUrl="http://test" apiKey="key" />);
+    expect(screen.getByTitle("Chat")).toBeInTheDocument();
+  });
+
+  it("clicking FAB opens the panel", async () => {
+    render(<PolymorphWidget apiBaseUrl="http://test" apiKey="key" />);
+    const fab = screen.getByTitle("Chat").closest("button")!;
+    fireEvent.click(fab);
+    await waitFor(() => {
+      expect(
+        document.querySelector("[aria-hidden='false']"),
+      ).toBeInTheDocument();
+    });
+  });
+
+  it("clicking FAB again closes the panel", async () => {
+    render(<PolymorphWidget apiBaseUrl="http://test" apiKey="key" />);
+    const fab = screen.getByTitle("Chat").closest("button")!;
+
+    // Open
+    fireEvent.click(fab);
+    await waitFor(() => {
+      expect(
+        document.querySelector("[aria-hidden='false']"),
+      ).toBeInTheDocument();
+    });
+
+    // The FAB now shows a Close icon — find the FAB button specifically
+    // (not the panel header close button) by its CSS class
+    const fabButtons = screen
+      .getAllByTitle("Close")
+      .map((el) => el.closest("button")!);
+    const fabBtn = fabButtons.find((btn) => btn.className.includes("fab"))!;
+    fireEvent.click(fabBtn);
+    await waitFor(() => {
+      expect(
+        document.querySelector("[aria-hidden='true']"),
+      ).toBeInTheDocument();
+    });
+  });
+
+  it("shows greeting message after config loads", async () => {
+    render(<PolymorphWidget apiBaseUrl="http://test" apiKey="key" />);
+    await waitFor(() => {
+      expect(screen.getByText("Welcome!")).toBeInTheDocument();
+    });
+  });
+
+  it("applies correct position class from config", async () => {
+    const leftResponse = { ...RESOLVE_RESPONSE, position: "bottom-left" };
+    fetchMock.mockImplementation((url: string) => {
+      if (url.includes("/widget-configs/resolve")) {
+        return Promise.resolve({
+          ok: true,
+          json: () => Promise.resolve(leftResponse),
+        });
+      }
+      return Promise.resolve({
+        ok: false,
+        status: 404,
+        text: () => Promise.resolve(""),
+      });
+    });
+
+    render(<PolymorphWidget apiBaseUrl="http://test" apiKey="key" />);
+
+    await waitFor(() => {
+      expect(screen.getByText("Welcome!")).toBeInTheDocument();
+    });
+
+    const root = document.querySelector(".polymorph-widget")!;
+    expect(root.className).toContain("bottomLeft");
+  });
+
+  it("dark mode applies correct color scheme", async () => {
+    const darkResponse = { ...RESOLVE_RESPONSE, dark_mode: true };
+    fetchMock.mockImplementation((url: string) => {
+      if (url.includes("/widget-configs/resolve")) {
+        return Promise.resolve({
+          ok: true,
+          json: () => Promise.resolve(darkResponse),
+        });
+      }
+      return Promise.resolve({
+        ok: false,
+        status: 404,
+        text: () => Promise.resolve(""),
+      });
+    });
+
+    render(<PolymorphWidget apiBaseUrl="http://test" apiKey="key" />);
+
+    await waitFor(() => {
+      expect(screen.getByText("Welcome!")).toBeInTheDocument();
+    });
+
+    const root = document.querySelector(".polymorph-widget")!;
+    expect((root as HTMLElement).style.colorScheme).toBe("dark");
+  });
+});

package/src/__tests__/integration.test.ts

@@ -0,0 +1,58 @@
+import { describe, expect, it } from "vitest";
+
+const API_URL = process.env.DEMO_RESEARCHER_API_URL;
+const API_KEY = process.env.INTEGRATION_TEST_API_KEY;
+
+const shouldRun = API_URL && API_KEY;
+
+describe.skipIf(!shouldRun)("SDK integration against demo", () => {
+  it("resolves widget config", async () => {
+    const res = await fetch(`${API_URL}/widget-configs/resolve`, {
+      headers: { Authorization: `Bearer ${API_KEY}` },
+    });
+    expect(res.status).toBe(200);
+    const data = await res.json();
+    expect(data).toHaveProperty("id");
+    expect(data).toHaveProperty("title");
+    expect(data).toHaveProperty("greeting");
+  });
+
+  it("starts a voice room session", async () => {
+    const res = await fetch(`${API_URL}/voice-rooms/start`, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        Authorization: `Bearer ${API_KEY}`,
+      },
+      body: JSON.stringify({
+        agent_name: "custom-voice-agent",
+      }),
+    });
+    expect(res.status).toBe(200);
+    const data = await res.json();
+    expect(data).toHaveProperty("token");
+    expect(data).toHaveProperty("livekit_url");
+  });
+
+  it("resolved config has all expected fields", async () => {
+    const res = await fetch(`${API_URL}/widget-configs/resolve`, {
+      headers: { Authorization: `Bearer ${API_KEY}` },
+    });
+    const data = await res.json();
+    const expectedFields = [
+      "id",
+      "title",
+      "subtitle",
+      "primary_color",
+      "position",
+      "dark_mode",
+      "enable_voice",
+      "greeting",
+      "collect_email",
+      "collect_phone",
+    ];
+    for (const field of expectedFields) {
+      expect(data).toHaveProperty(field);
+    }
+  });
+});