polymorph-sdk 0.2.2 → 0.2.4

package/src/usePolymorphSession.ts

@@ -1,16 +1,54 @@
-import type { Room } from "livekit-client";
+import { ParticipantKind, type Room, RoomEvent } from "livekit-client";
 import { useCallback, useEffect, useRef, useState } from "react";
-import type { ChatMessage, SessionStatus, WidgetConfig } from "./types";
+import type {
+  ChatMessage,
+  IdentityCollection,
+  ResolvedWidgetConfig,
+  SessionStatus,
+  WidgetConfig,
+  WidgetUser,
+} from "./types";
 
-const csrfStorageKey = "polymorph.csrf";
+function resolveApiBaseUrl(configured?: string): string {
+  if (configured) return configured;
+  if (
+    typeof window !== "undefined" &&
+    (window.location.hostname === "localhost" ||
+      window.location.hostname === "127.0.0.1")
+  ) {
+    return "http://localhost:8080";
+  }
+  return "https://api.usepolymorph.com";
+}
+
+function storageKey(base: string, scope?: string): string {
+  return scope ? `${base}:${scope}` : base;
+}
+
+function loadStoredIdentity(scope?: string): WidgetUser | undefined {
+  try {
+    const stored = localStorage.getItem(
+      storageKey("polymorph_user_identity", scope),
+    );
+    if (stored) return JSON.parse(stored) as WidgetUser;
+  } catch {
+    /* ignore */
+  }
+  return undefined;
+}
 
 interface RoomConnection {
   token: string;
   livekitUrl: string;
 }
 
-async function ensureCsrf(apiBaseUrl: string, fetchOptions?: RequestInit) {
-  if (sessionStorage.getItem(csrfStorageKey)) return;
+async function ensureCsrf(
+  apiBaseUrl: string,
+  scope: string | undefined,
+  fetchOptions?: RequestInit,
+) {
+  const key = storageKey("polymorph.csrf", scope);
+  if (sessionStorage.getItem(key)) return;
 
   try {
     const res = await fetch(`${apiBaseUrl}/auth/csrf`, {
@@ -22,7 +60,7 @@ async function ensureCsrf(apiBaseUrl: string, fetchOptions?: RequestInit) {
     }
     const data = (await res.json()) as { csrf_token?: string };
     if (data.csrf_token) {
-      sessionStorage.setItem(csrfStorageKey, data.csrf_token);
+      sessionStorage.setItem(key, data.csrf_token);
       return;
     }
     throw new Error("CSRF token missing in response");
@@ -33,33 +71,178 @@ async function ensureCsrf(apiBaseUrl: string, fetchOptions?: RequestInit) {
   }
 }
 
+function buildAuthHeaders(
+  config: WidgetConfig,
+  scope: string | undefined,
+): Record<string, string> {
+  const headers: Record<string, string> = {};
+  if (config.apiKey) {
+    headers.Authorization = `Bearer ${config.apiKey}`;
+  } else if (config.fetchOptions?.credentials === "include") {
+    const csrf = sessionStorage.getItem(storageKey("polymorph.csrf", scope));
+    if (csrf) headers["x-csrf-token"] = csrf;
+  }
+  return headers;
+}
+
 export function usePolymorphSession(config: WidgetConfig) {
-  const isChatOnlyAgent = (config.agentName || "")
-    .toLowerCase()
-    .includes("chat-agent");
-  const defaultVoiceEnabled = config.enableVoice !== false && !isChatOnlyAgent;
+  const apiBaseUrl = resolveApiBaseUrl(config.apiBaseUrl);
+  // Scope storage keys so multiple widget instances don't collide.
+  const scope = config.configId || config.apiKey;
   const [status, setStatus] = useState<SessionStatus>("idle");
   const [roomConnection, setRoomConnection] = useState<RoomConnection | null>(
     null,
   );
   const [messages, setMessages] = useState<ChatMessage[]>([]);
-  const [isVoiceEnabled, setIsVoiceEnabled] = useState(defaultVoiceEnabled);
-  const [isMicActive, setIsMicActive] = useState(defaultVoiceEnabled);
+  const [isVoiceEnabled, setIsVoiceEnabled] = useState(false);
+  const [isMicActive, setIsMicActive] = useState(false);
+  const [isScreenSharing, setIsScreenSharing] = useState(false);
+  const [hasObserver, setHasObserver] = useState(false);
+  const [hasUnread, setHasUnread] = useState(false);
+  const [wiggleKey, setWiggleKey] = useState(0);
   const [error, setError] = useState<string | null>(null);
+  const [resolvedConfig, setResolvedConfig] =
+    useState<ResolvedWidgetConfig | null>(null);
+  const [resolvedUser, setResolvedUser] = useState<WidgetUser | undefined>(
+    config.user ?? loadStoredIdentity(scope),
+  );
   const roomRef = useRef<Room | null>(null);
+  const pendingMessagesRef = useRef<string[]>([]);
+  const isPanelOpenRef = useRef<boolean>(false);
+  // Stable ref for fetchOptions to avoid infinite useEffect loops
+  // (inline objects like { credentials: "include" } create new refs each render)
+  const fetchOptionsRef = useRef(config.fetchOptions);
+  fetchOptionsRef.current = config.fetchOptions;
 
+  // Fetch widget config from backend on mount or when configId changes
   useEffect(() => {
-    setIsVoiceEnabled(defaultVoiceEnabled);
-    setIsMicActive(defaultVoiceEnabled);
-    if (roomRef.current) {
-      void roomRef.current.localParticipant.setMicrophoneEnabled(
-        defaultVoiceEnabled,
-      );
+    let cancelled = false;
+
+    async function fetchConfig() {
+      try {
+        const fetchOpts = fetchOptionsRef.current;
+        // Ensure CSRF token for cookie-based auth
+        if (!config.apiKey && fetchOpts?.credentials === "include") {
+          await ensureCsrf(apiBaseUrl, scope, fetchOpts);
+        }
+
+        const params = config.configId ? `?config_id=${config.configId}` : "";
+        const res = await fetch(
+          `${apiBaseUrl}/widget-configs/resolve${params}`,
+          {
+            headers: {
+              ...buildAuthHeaders(config, scope),
+              ...(fetchOpts?.headers instanceof Headers
+                ? Object.fromEntries(fetchOpts.headers.entries())
+                : (fetchOpts?.headers as Record<string, string> | undefined)),
+            },
+            credentials: fetchOpts?.credentials,
+          },
+        );
+        if (!res.ok) return;
+        const data = await res.json();
+        if (cancelled) return;
+
+        const cfg: ResolvedWidgetConfig = {
+          id: data.id,
+          title: data.title,
+          subtitle: data.subtitle,
+          primaryColor: data.primary_color,
+          position: data.position,
+          darkMode: data.dark_mode,
+          enableVoice: data.enable_voice,
+          greeting: data.greeting,
+          collectEmail: data.collect_email,
+          collectPhone: data.collect_phone,
+        };
+        setResolvedConfig(cfg);
+
+        // Show greeting immediately (before agent connects).
+        // Use config greeting, or personalized fallback matching agent logic.
+        const userName = resolvedUser?.name;
+        const greetingText =
+          cfg.greeting ||
+          (userName
+            ? `Hey ${userName}! How can I help ya today?`
+            : "Hey! How can I help ya today?");
+        setMessages((prev) => {
+          if (prev.length > 0) return prev;
+          return [
+            {
+              id: "greeting",
+              role: "agent" as const,
+              text: greetingText,
+              source: "chat" as const,
+              timestamp: Date.now(),
+            },
+          ];
+        });
+
+        // Start in chat-only mode; user can enable voice via the overlay toggle
+        setIsVoiceEnabled(false);
+        setIsMicActive(false);
+      } catch {
+        // Config fetch failed - widget will show defaults
+      }
     }
-  }, [defaultVoiceEnabled]);
+
+    void fetchConfig();
+    return () => {
+      cancelled = true;
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [
+    apiBaseUrl,
+    config.apiKey,
+    config.configId,
+    config.agentName,
+    scope,
+    config,
+    resolvedUser?.name,
+  ]);
+
+  // Derive identity collection from resolved config
+  const identityCollection: IdentityCollection | null = resolvedConfig
+    ? {
+        collectEmail: resolvedConfig.collectEmail,
+        collectPhone: resolvedConfig.collectPhone,
+      }
+    : null;
+
+  // Determine if identity form is needed
+  const needsIdentityForm =
+    identityCollection !== null &&
+    (identityCollection.collectEmail !== "hidden" ||
+      identityCollection.collectPhone !== "hidden") &&
+    !resolvedUser?.name;
+
+  const setUser = useCallback(
+    (user: WidgetUser) => {
+      setResolvedUser(user);
+      try {
+        localStorage.setItem(
+          storageKey("polymorph_user_identity", scope),
+          JSON.stringify(user),
+        );
+      } catch {
+        /* quota exceeded, etc */
+      }
+    },
+    [scope],
+  );
 
   const addMessage = useCallback(
-    (role: "user" | "agent", text: string, source: "chat" | "voice") => {
+    (
+      role: "user" | "agent",
+      text: string,
+      source: "chat" | "voice",
+      senderName?: string,
+      senderType?: "human",
+    ) => {
+      if (role === "agent" && !isPanelOpenRef.current) {
+        setHasUnread(true);
+        setWiggleKey((k) => k + 1);
+      }
       setMessages((prev) => [
         ...prev,
         {
@@ -68,12 +251,25 @@ export function usePolymorphSession(config: WidgetConfig) {
           text,
           source,
           timestamp: Date.now(),
+          senderName,
+          senderType,
         },
       ]);
     },
     [],
   );
 
+  const clearUnread = useCallback(() => {
+    setHasUnread(false);
+  }, []);
+
+  const setPanelOpen = useCallback((open: boolean) => {
+    isPanelOpenRef.current = open;
+    if (open) {
+      setHasUnread(false);
+    }
+  }, []);
+
   const connect = useCallback(async () => {
     if (status === "connecting" || status === "connected") return;
     setStatus("connecting");
@@ -85,20 +281,25 @@ export function usePolymorphSession(config: WidgetConfig) {
       if (config.apiKey) {
         authHeaders.Authorization = `Bearer ${config.apiKey}`;
       } else if (restFetchOptions.credentials === "include") {
-        await ensureCsrf(config.apiBaseUrl, restFetchOptions);
-        const csrf = sessionStorage.getItem(csrfStorageKey);
+        await ensureCsrf(apiBaseUrl, scope, restFetchOptions);
+        const csrf = sessionStorage.getItem(
+          storageKey("polymorph.csrf", scope),
+        );
         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;
+      const sessionKey = storageKey("polymorph_widget_session", scope);
+      let externalUserId = localStorage.getItem(sessionKey) ?? undefined;
       if (!externalUserId) {
         externalUserId = `widget-session-${crypto.randomUUID().slice(0, 12)}`;
-        localStorage.setItem(storageKey, externalUserId);
+        localStorage.setItem(sessionKey, externalUserId);
       }
 
-      const response = await fetch(`${config.apiBaseUrl}/voice-rooms/start`, {
+      // Use the resolved config ID (from backend) or fall back to prop
+      const resolvedConfigId = resolvedConfig?.id ?? config.configId;
+
+      const response = await fetch(`${apiBaseUrl}/voice-rooms/start`, {
         method: "POST",
         headers: {
           "Content-Type": "application/json",
@@ -109,80 +310,167 @@ export function usePolymorphSession(config: WidgetConfig) {
         },
         body: JSON.stringify({
           agent_name: config.agentName || "custom-voice-agent",
-          metadata: {
-            ...config.metadata,
-            ...(config.branding?.greeting && {
-              greeting: config.branding.greeting,
-            }),
-          },
+          config_id: resolvedConfigId ?? undefined,
+          metadata: resolvedConfigId ? undefined : config.metadata,
+          user_name: resolvedUser?.name,
+          user_email: resolvedUser?.email,
+          user_phone: resolvedUser?.phone,
           external_user_id: externalUserId,
         }),
         ...restFetchOptions,
       });
       if (response.status === 403) {
-        sessionStorage.removeItem(csrfStorageKey);
+        sessionStorage.removeItem(storageKey("polymorph.csrf", scope));
       }
       if (!response.ok) {
         throw new Error((await response.text()) || "Failed to start session");
       }
       const data = await response.json();
       setRoomConnection({ token: data.token, livekitUrl: data.livekit_url });
+      if (data.id && data.join_token) {
+        config.onSessionStart?.({
+          roomId: data.id,
+          joinToken: data.join_token,
+        });
+      }
     } catch (err) {
       setError(err instanceof Error ? err.message : "Something went wrong");
       setStatus("error");
     }
-  }, [config, status]);
+  }, [config, status, resolvedUser, resolvedConfig, apiBaseUrl, scope]);
 
   const disconnect = useCallback(() => {
     roomRef.current?.disconnect();
     roomRef.current = null;
     setRoomConnection(null);
     setStatus("idle");
+    setIsVoiceEnabled(false);
+    setIsMicActive(false);
+    setIsScreenSharing(false);
+    setHasObserver(false);
   }, []);
 
   const sendMessage = useCallback(
     (text: string) => {
+      if (!text.trim()) return;
+      const trimmed = text.trim();
+      addMessage("user", trimmed, "chat");
+
       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",
-      });
+      if (room) {
+        const payload = new TextEncoder().encode(
+          JSON.stringify({ text: trimmed }),
+        );
+        room.localParticipant.publishData(payload, {
+          reliable: true,
+          topic: "chat_message",
+        });
+      } else {
+        pendingMessagesRef.current.push(trimmed);
+        void connect();
+      }
     },
-    [addMessage],
+    [addMessage, connect],
   );
 
   const toggleMic = useCallback(async () => {
     const room = roomRef.current;
     if (!room) return;
-    const newState = !isMicActive;
-    await room.localParticipant.setMicrophoneEnabled(newState);
-    setIsMicActive(newState);
-  }, [isMicActive]);
+    try {
+      const newState = !room.localParticipant.isMicrophoneEnabled;
+      await room.localParticipant.setMicrophoneEnabled(newState);
+      setIsMicActive(newState);
+    } catch {
+      /* mic toggle failed — ignore */
+    }
+  }, []);
 
   const toggleVoice = useCallback(async () => {
+    const room = roomRef.current;
+    if (!room) {
+      // Not connected yet — connect with voice enabled
+      setIsVoiceEnabled(true);
+      setIsMicActive(true);
+      await connect();
+      return;
+    }
+    try {
+      const newState = !isVoiceEnabled;
+      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",
+      });
+    } catch {
+      /* voice toggle failed — ignore */
+    }
+  }, [isVoiceEnabled, connect]);
+
+  const toggleScreenShare = useCallback(async () => {
     const room = roomRef.current;
     if (!room) return;
-    const newState = !isVoiceEnabled;
-    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]);
+    try {
+      const newState = !room.localParticipant.isScreenShareEnabled;
+      await room.localParticipant.setScreenShareEnabled(newState);
+      setIsScreenSharing(newState);
+    } catch {
+      /* screen share toggle failed — ignore */
+    }
+  }, []);
 
   const setRoom = useCallback((room: Room | null) => {
     roomRef.current = room;
-    if (room) setStatus("connected");
+    if (room) {
+      setStatus("connected");
+
+      // Track observer (non-agent remote participant) presence
+      const checkObserver = () => {
+        const hasNonAgent = Array.from(room.remoteParticipants.values()).some(
+          (p) => p.kind !== ParticipantKind.AGENT,
+        );
+        setHasObserver(hasNonAgent);
+      };
+      checkObserver();
+      room.on(RoomEvent.ParticipantConnected, checkObserver);
+      room.on(RoomEvent.ParticipantDisconnected, checkObserver);
+
+      // Flush pending messages once the agent participant has joined the room.
+      // LiveKit data messages are only delivered to participants currently in
+      // the room, so sending before the agent connects means messages are lost.
+      const pending = pendingMessagesRef.current.splice(0);
+      if (pending.length > 0) {
+        let flushed = false;
+        const flush = () => {
+          if (flushed) return;
+          flushed = true;
+          for (const text of pending) {
+            const payload = new TextEncoder().encode(JSON.stringify({ text }));
+            room.localParticipant.publishData(payload, {
+              reliable: true,
+              topic: "chat_message",
+            });
+          }
+        };
+        if (room.remoteParticipants.size > 0) {
+          setTimeout(flush, 500);
+        } else {
+          const onJoin = () => {
+            room.off(RoomEvent.ParticipantConnected, onJoin);
+            setTimeout(flush, 500);
+          };
+          room.on(RoomEvent.ParticipantConnected, onJoin);
+          setTimeout(() => {
+            room.off(RoomEvent.ParticipantConnected, onJoin);
+            flush();
+          }, 5000);
+        }
+      }
+    }
   }, []);
 
   return {
@@ -191,13 +479,24 @@ export function usePolymorphSession(config: WidgetConfig) {
     messages,
     isVoiceEnabled,
     isMicActive,
+    isScreenSharing,
+    hasObserver,
+    hasUnread,
+    wiggleKey,
     error,
+    needsIdentityForm,
+    identityCollection,
+    resolvedConfig,
     connect,
     disconnect,
     addMessage,
     sendMessage,
     toggleMic,
     toggleVoice,
+    toggleScreenShare,
     setRoom,
+    setUser,
+    clearUnread,
+    setPanelOpen,
   };
 }