polymorph-sdk 0.2.0 → 0.2.2

package/src/styles.module.css

@@ -4,15 +4,19 @@
   display: flex;
   flex-direction: column;
   align-items: flex-end;
+  justify-content: flex-end;
   gap: 12px;
+  pointer-events: none;
 }
 
 .bottomRight {
+  top: 24px;
   bottom: 24px;
   right: 24px;
 }
 
 .bottomLeft {
+  top: 24px;
   bottom: 24px;
   left: 24px;
   align-items: flex-start;
@@ -28,8 +32,11 @@
   align-items: center;
   justify-content: center;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-  transition: transform 150ms ease, box-shadow 150ms ease;
+  transition:
+    transform 150ms ease,
+    box-shadow 150ms ease;
   color: white;
+  pointer-events: auto;
 }
 
 .fab:hover {
@@ -43,15 +50,18 @@
   display: flex;
   flex-direction: column;
   border-radius: 16px;
-  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
+  box-shadow:
+    0 4px 24px rgba(0, 0, 0, 0.08),
+    0 12px 48px rgba(0, 0, 0, 0.12);
   overflow: hidden;
-  background: white;
-  border: 1px solid #e5e5e5;
+  background: var(--mantine-color-body);
+  color: var(--mantine-color-text);
+  pointer-events: auto;
 }
 
 .header {
   padding: 16px 16px 12px;
-  border-bottom: 1px solid #f0f0f0;
+  border-bottom: 1px solid var(--mantine-color-default-border);
   display: flex;
   justify-content: space-between;
   align-items: flex-start;
@@ -79,8 +89,8 @@
 
 .agentMessage {
   align-self: flex-start;
-  background: #f5f5f5;
-  color: #171717;
+  background: var(--mantine-color-gray-light);
+  color: var(--mantine-color-text);
 }
 
 .userMessage {
@@ -100,8 +110,8 @@
   align-items: center;
   gap: 8px;
   font-size: 13px;
-  color: #737373;
-  border-top: 1px solid #f0f0f0;
+  color: var(--mantine-color-dimmed);
+  border-top: 1px solid var(--mantine-color-default-border);
 }
 
 .voiceBars {
@@ -118,13 +128,27 @@
   animation: voiceBar 1.2s ease-in-out infinite;
 }
 
-.voiceBar:nth-child(1) { height: 6px; animation-delay: 0s; }
-.voiceBar:nth-child(2) { height: 12px; animation-delay: 0.2s; }
-.voiceBar:nth-child(3) { height: 8px; animation-delay: 0.4s; }
+.voiceBar:nth-child(1) {
+  height: 6px;
+  animation-delay: 0s;
+}
+.voiceBar:nth-child(2) {
+  height: 12px;
+  animation-delay: 0.2s;
+}
+.voiceBar:nth-child(3) {
+  height: 8px;
+  animation-delay: 0.4s;
+}
 
 @keyframes voiceBar {
-  0%, 100% { transform: scaleY(1); }
-  50% { transform: scaleY(0.4); }
+  0%,
+  100% {
+    transform: scaleY(1);
+  }
+  50% {
+    transform: scaleY(0.4);
+  }
 }
 
 .voiceToggle {
@@ -132,33 +156,33 @@
   width: 28px;
   height: 28px;
   border-radius: 14px;
-  border: 1px solid #e5e5e5;
+  border: 1px solid var(--mantine-color-default-border);
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
-  background: #f5f5f5;
-  color: #737373;
+  background: var(--mantine-color-gray-light);
+  color: var(--mantine-color-dimmed);
   transition: all 150ms ease;
 }
 
 .voiceToggle:hover {
-  background: #e5e5e5;
+  background: var(--mantine-color-gray-light-hover);
 }
 
 .voiceToggleActive {
-  background: #dcfce7;
-  border-color: #bbf7d0;
-  color: #16a34a;
+  background: light-dark(#dcfce7, #1a3a2a);
+  border-color: light-dark(#bbf7d0, #2a5a3a);
+  color: light-dark(#16a34a, #4ade80);
 }
 
 .voiceToggleActive:hover {
-  background: #bbf7d0;
+  background: light-dark(#bbf7d0, #2a5a3a);
 }
 
 .inputBar {
   padding: 12px 16px;
-  border-top: 1px solid #f0f0f0;
+  border-top: 1px solid var(--mantine-color-default-border);
   display: flex;
   gap: 8px;
   align-items: center;
@@ -166,16 +190,18 @@
 
 .inputField {
   flex: 1;
-  border: 1px solid #e5e5e5;
+  border: 1px solid var(--mantine-color-default-border);
   border-radius: 8px;
   padding: 8px 12px;
   font-size: 14px;
   outline: none;
   font-family: inherit;
+  background: var(--mantine-color-body);
+  color: var(--mantine-color-text);
 }
 
 .inputField:focus {
-  border-color: #a3a3a3;
+  border-color: var(--mantine-color-dimmed);
 }
 
 .iconButton {
@@ -188,12 +214,14 @@
   align-items: center;
   justify-content: center;
   background: transparent;
-  color: #737373;
-  transition: background 150ms ease, color 150ms ease;
+  color: var(--mantine-color-dimmed);
+  transition:
+    background 150ms ease,
+    color 150ms ease;
 }
 
 .iconButton:hover {
-  background: #f5f5f5;
+  background: var(--mantine-color-gray-light);
 }
 
 .iconButton:disabled {
@@ -238,3 +266,39 @@
   font-size: 13px;
   padding: 0 16px;
 }
+
+.thinkingDots {
+  display: flex;
+  gap: 4px;
+  align-items: center;
+  height: 20px;
+}
+
+.thinkingDots span {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--mantine-color-dimmed);
+  animation: thinkingDot 1.4s ease-in-out infinite;
+}
+
+.thinkingDots span:nth-child(2) {
+  animation-delay: 0.2s;
+}
+
+.thinkingDots span:nth-child(3) {
+  animation-delay: 0.4s;
+}
+
+@keyframes thinkingDot {
+  0%,
+  80%,
+  100% {
+    opacity: 0.3;
+    transform: scale(0.8);
+  }
+  40% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}

package/src/types.ts

@@ -1,17 +1,17 @@
 export interface WidgetConfig {
   apiBaseUrl: string;
   apiKey?: string;
-  metadata?: Record<string, string>;
+  /** LiveKit dispatched agent name (default: "custom-voice-agent"). */
+  agentName?: string;
+  metadata?: Record<string, string | string[]>;
   branding?: WidgetBranding;
   position?: "bottom-right" | "bottom-left";
   /** Enable voice call (default: true). When false, widget is chat-only. */
   enableVoice?: boolean;
-  /** Participant identity sent to LiveKit */
-  userIdentity?: string;
-  /** Participant display name sent to LiveKit */
-  userName?: string;
   /** Extra options passed to fetch (e.g. { credentials: "include" }) */
   fetchOptions?: RequestInit;
+  /** Render widget in dark mode (default: false) */
+  darkMode?: boolean;
 }
 
 export interface WidgetBranding {

package/src/usePolymorphSession.ts

@@ -1,56 +1,103 @@
-import { useCallback, useRef, useState } from "react";
 import type { Room } from "livekit-client";
+import { useCallback, useEffect, useRef, useState } from "react";
 import type { ChatMessage, SessionStatus, WidgetConfig } from "./types";
 
+const csrfStorageKey = "polymorph.csrf";
+
 interface RoomConnection {
   token: string;
   livekitUrl: string;
 }
 
-function makeGreeting(text: string): ChatMessage {
-  return {
-    id: "greeting",
-    role: "agent",
-    text,
-    source: "chat",
-    timestamp: Date.now(),
-  };
+async function ensureCsrf(apiBaseUrl: string, fetchOptions?: RequestInit) {
+  if (sessionStorage.getItem(csrfStorageKey)) return;
+
+  try {
+    const res = await fetch(`${apiBaseUrl}/auth/csrf`, {
+      credentials: "include",
+      ...(fetchOptions ?? {}),
+    });
+    if (!res.ok) {
+      throw new Error(`CSRF request failed (${res.status})`);
+    }
+    const data = (await res.json()) as { csrf_token?: string };
+    if (data.csrf_token) {
+      sessionStorage.setItem(csrfStorageKey, data.csrf_token);
+      return;
+    }
+    throw new Error("CSRF token missing in response");
+  } catch (err) {
+    const message =
+      err instanceof Error ? err.message : "Failed to fetch CSRF token";
+    throw new Error(message);
+  }
 }
 
 export function usePolymorphSession(config: WidgetConfig) {
+  const isChatOnlyAgent = (config.agentName || "")
+    .toLowerCase()
+    .includes("chat-agent");
+  const defaultVoiceEnabled = config.enableVoice !== false && !isChatOnlyAgent;
   const [status, setStatus] = useState<SessionStatus>("idle");
-  const [roomConnection, setRoomConnection] = useState<RoomConnection | null>(null);
-  const [messages, setMessages] = useState<ChatMessage[]>(() => {
-    if (config.branding?.greeting) {
-      return [makeGreeting(config.branding.greeting)];
-    }
-    return [];
-  });
-  const [isVoiceEnabled, setIsVoiceEnabled] = useState(config.enableVoice !== false);
-  const [isMicActive, setIsMicActive] = useState(config.enableVoice !== false);
+  const [roomConnection, setRoomConnection] = useState<RoomConnection | null>(
+    null,
+  );
+  const [messages, setMessages] = useState<ChatMessage[]>([]);
+  const [isVoiceEnabled, setIsVoiceEnabled] = useState(defaultVoiceEnabled);
+  const [isMicActive, setIsMicActive] = useState(defaultVoiceEnabled);
   const [error, setError] = useState<string | null>(null);
   const roomRef = useRef<Room | null>(null);
 
-  const addMessage = useCallback((role: "user" | "agent", text: string, source: "chat" | "voice") => {
-    setMessages(prev => [...prev, {
-      id: crypto.randomUUID(),
-      role,
-      text,
-      source,
-      timestamp: Date.now(),
-    }]);
-  }, []);
+  useEffect(() => {
+    setIsVoiceEnabled(defaultVoiceEnabled);
+    setIsMicActive(defaultVoiceEnabled);
+    if (roomRef.current) {
+      void roomRef.current.localParticipant.setMicrophoneEnabled(
+        defaultVoiceEnabled,
+      );
+    }
+  }, [defaultVoiceEnabled]);
+
+  const addMessage = useCallback(
+    (role: "user" | "agent", text: string, source: "chat" | "voice") => {
+      setMessages((prev) => [
+        ...prev,
+        {
+          id: crypto.randomUUID(),
+          role,
+          text,
+          source,
+          timestamp: Date.now(),
+        },
+      ]);
+    },
+    [],
+  );
 
   const connect = useCallback(async () => {
     if (status === "connecting" || status === "connected") return;
     setStatus("connecting");
     setError(null);
     try {
-      const { headers: extraHeaders, ...restFetchOptions } = config.fetchOptions ?? {};
+      const { headers: extraHeaders, ...restFetchOptions } =
+        config.fetchOptions ?? {};
       const authHeaders: Record<string, string> = {};
       if (config.apiKey) {
-        authHeaders["Authorization"] = `Bearer ${config.apiKey}`;
+        authHeaders.Authorization = `Bearer ${config.apiKey}`;
+      } else if (restFetchOptions.credentials === "include") {
+        await ensureCsrf(config.apiBaseUrl, restFetchOptions);
+        const csrf = sessionStorage.getItem(csrfStorageKey);
+        if (csrf) authHeaders["x-csrf-token"] = csrf;
+      }
+
+      // Persist a stable external_user_id per browser for session stitching.
+      const storageKey = "polymorph_widget_session";
+      let externalUserId = localStorage.getItem(storageKey) ?? undefined;
+      if (!externalUserId) {
+        externalUserId = `widget-session-${crypto.randomUUID().slice(0, 12)}`;
+        localStorage.setItem(storageKey, externalUserId);
       }
+
       const response = await fetch(`${config.apiBaseUrl}/voice-rooms/start`, {
         method: "POST",
         headers: {
@@ -61,15 +108,22 @@ export function usePolymorphSession(config: WidgetConfig) {
             : extraHeaders),
         },
         body: JSON.stringify({
-          agent_name: "custom-voice-agent",
-          metadata: config.metadata,
-          user_identity: config.userIdentity,
-          user_name: config.userName,
+          agent_name: config.agentName || "custom-voice-agent",
+          metadata: {
+            ...config.metadata,
+            ...(config.branding?.greeting && {
+              greeting: config.branding.greeting,
+            }),
+          },
+          external_user_id: externalUserId,
         }),
         ...restFetchOptions,
       });
+      if (response.status === 403) {
+        sessionStorage.removeItem(csrfStorageKey);
+      }
       if (!response.ok) {
-        throw new Error(await response.text() || "Failed to start session");
+        throw new Error((await response.text()) || "Failed to start session");
       }
       const data = await response.json();
       setRoomConnection({ token: data.token, livekitUrl: data.livekit_url });
@@ -86,13 +140,21 @@ export function usePolymorphSession(config: WidgetConfig) {
     setStatus("idle");
   }, []);
 
-  const sendMessage = useCallback((text: string) => {
-    const room = roomRef.current;
-    if (!room || !text.trim()) return;
-    addMessage("user", text.trim(), "chat");
-    const payload = new TextEncoder().encode(JSON.stringify({ text: text.trim() }));
-    room.localParticipant.publishData(payload, { reliable: true, topic: "chat_message" });
-  }, [addMessage]);
+  const sendMessage = useCallback(
+    (text: string) => {
+      const room = roomRef.current;
+      if (!room || !text.trim()) return;
+      addMessage("user", text.trim(), "chat");
+      const payload = new TextEncoder().encode(
+        JSON.stringify({ text: text.trim() }),
+      );
+      room.localParticipant.publishData(payload, {
+        reliable: true,
+        topic: "chat_message",
+      });
+    },
+    [addMessage],
+  );
 
   const toggleMic = useCallback(async () => {
     const room = roomRef.current;
@@ -109,6 +171,13 @@ export function usePolymorphSession(config: WidgetConfig) {
     await room.localParticipant.setMicrophoneEnabled(newState);
     setIsVoiceEnabled(newState);
     setIsMicActive(newState);
+    const payload = new TextEncoder().encode(
+      JSON.stringify({ voice_enabled: newState }),
+    );
+    room.localParticipant.publishData(payload, {
+      reliable: true,
+      topic: "voice_mode",
+    });
   }, [isVoiceEnabled]);
 
   const setRoom = useCallback((room: Room | null) => {