polymorph-sdk 0.2.2 → 0.2.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "polymorph-sdk",
-  "version": "0.2.2",
+  "version": "0.2.4",
   "type": "module",
   "sideEffects": false,
   "main": "src/index.ts",

package/src/ChatThread.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useRef } from "react";
+import { useCallback, useRef } from "react";
 import styles from "./styles.module.css";
 import type { ChatMessage, SessionStatus } from "./types";
 
@@ -12,8 +12,19 @@ export function ChatThread({
   status: SessionStatus;
 }) {
   const scrollRef = useRef<HTMLDivElement>(null);
+  const isNearBottom = useRef(true);
+  const prevItemCount = useRef(0);
   const agentCountAtConnect = useRef<number | null>(null);
   const agentMessageCount = messages.filter((m) => m.role === "agent").length;
+  const lastMessageIsUser =
+    messages.length > 0 && messages[messages.length - 1].role === "user";
+
+  const handleScroll = useCallback(() => {
+    const el = scrollRef.current;
+    if (!el) return;
+    isNearBottom.current =
+      el.scrollHeight - el.scrollTop - el.clientHeight < 100;
+  }, []);
 
   // Snapshot agent message count when connecting starts
   if (status === "connecting" && agentCountAtConnect.current === null) {
@@ -33,23 +44,45 @@ export function ChatThread({
     messages[messages.length - 1].role === "user";
   const showThinking = initialConnectThinking || waitingForAgentReply;
 
-  useEffect(() => {
-    scrollRef.current?.scrollTo({
-      top: scrollRef.current.scrollHeight,
-      behavior: "smooth",
-    });
-  }, []);
+  // Auto-scroll when new messages arrive or thinking indicator appears.
+  // Uses render-time comparison instead of useEffect to avoid lint issues
+  // with intentional "trigger" dependencies.
+  const itemCount = messages.length + (showThinking ? 1 : 0);
+  if (itemCount !== prevItemCount.current) {
+    prevItemCount.current = itemCount;
+    if (isNearBottom.current || lastMessageIsUser) {
+      queueMicrotask(() => {
+        scrollRef.current?.scrollTo({
+          top: scrollRef.current.scrollHeight,
+          behavior: "smooth",
+        });
+      });
+    }
+  }
 
   return (
-    <div ref={scrollRef} className={styles.chatThread}>
+    <div
+      ref={scrollRef}
+      className={styles.chatThread}
+      onScroll={handleScroll}
+      aria-live="polite"
+      aria-relevant="additions"
+    >
       {messages.map((msg) => (
         <div
           key={msg.id}
           className={`${styles.messageBubble} ${msg.role === "user" ? styles.userMessage : styles.agentMessage}`}
           style={
-            msg.role === "user" ? { backgroundColor: primaryColor } : undefined
+            msg.role === "user"
+              ? { backgroundColor: primaryColor }
+              : msg.senderType === "human"
+                ? { backgroundColor: `${primaryColor}20` }
+                : undefined
           }
         >
+          {msg.senderName && (
+            <div className={styles.senderLabel}>{msg.senderName}</div>
+          )}
           {msg.text}
           {msg.source === "voice" && (
             <div className={styles.voiceLabel}>voice</div>

package/src/IdentityForm.tsx

@@ -0,0 +1,135 @@
+import { useCallback, useState } from "react";
+import styles from "./styles.module.css";
+import type { FieldRequirement, WidgetUser } from "./types";
+
+interface IdentityFormProps {
+  collectEmail: FieldRequirement;
+  collectPhone: FieldRequirement;
+  primaryColor: string;
+  onSubmit: (user: WidgetUser) => void;
+}
+
+const EMAIL_RE = /^[^\s@]+@[^\s@]+\.[a-zA-Z]{2,}$/;
+const PHONE_DIGITS_RE = /\d/g;
+
+export function IdentityForm({
+  collectEmail,
+  collectPhone,
+  primaryColor,
+  onSubmit,
+}: IdentityFormProps) {
+  const [name, setName] = useState("");
+  const [email, setEmail] = useState("");
+  const [phone, setPhone] = useState("");
+  const [errors, setErrors] = useState<Record<string, string>>({});
+
+  const validate = useCallback(() => {
+    const e: Record<string, string> = {};
+    if (!name.trim()) e.name = "Name is required";
+    if (collectEmail === "required" && !email.trim())
+      e.email = "Email is required";
+    if (email.trim() && !EMAIL_RE.test(email.trim()))
+      e.email = "Invalid email format";
+    if (collectPhone === "required" && !phone.trim())
+      e.phone = "Phone is required";
+    if (phone.trim()) {
+      const digitCount = (phone.trim().match(PHONE_DIGITS_RE) || []).length;
+      if (digitCount < 7 || digitCount > 15)
+        e.phone = "Enter a valid phone number (7–15 digits)";
+    }
+    // "Either" mode: both optional, at least one required
+    if (
+      collectEmail === "optional" &&
+      collectPhone === "optional" &&
+      !email.trim() &&
+      !phone.trim()
+    )
+      e.contact = "Please provide either an email or phone number";
+    return e;
+  }, [name, email, phone, collectEmail, collectPhone]);
+
+  const handleSubmit = useCallback(
+    (ev: React.FormEvent) => {
+      ev.preventDefault();
+      const e = validate();
+      if (Object.keys(e).length > 0) {
+        setErrors(e);
+        return;
+      }
+      onSubmit({
+        name: name.trim(),
+        ...(email.trim() && { email: email.trim() }),
+        ...(phone.trim() && { phone: phone.trim() }),
+      });
+    },
+    [validate, onSubmit, name, email, phone],
+  );
+
+  return (
+    <form className={styles.identityForm} onSubmit={handleSubmit}>
+      <label className={styles.formField}>
+        <span className={styles.formLabel}>
+          Name <span className={styles.formError}>*</span>
+        </span>
+        <input
+          className={styles.formInput}
+          type="text"
+          value={name}
+          onChange={(ev) => setName(ev.target.value)}
+          placeholder="Your name"
+        />
+        {errors.name && <div className={styles.formError}>{errors.name}</div>}
+      </label>
+      {collectEmail !== "hidden" && (
+        <label className={styles.formField}>
+          <span className={styles.formLabel}>
+            Email{" "}
+            {collectEmail === "required" && (
+              <span className={styles.formError}>*</span>
+            )}
+          </span>
+          <input
+            className={styles.formInput}
+            type="email"
+            value={email}
+            onChange={(ev) => setEmail(ev.target.value)}
+            placeholder="you@example.com"
+          />
+          {errors.email && (
+            <div className={styles.formError}>{errors.email}</div>
+          )}
+        </label>
+      )}
+      {collectPhone !== "hidden" && (
+        <label className={styles.formField}>
+          <span className={styles.formLabel}>
+            Phone{" "}
+            {collectPhone === "required" && (
+              <span className={styles.formError}>*</span>
+            )}
+          </span>
+          <input
+            className={styles.formInput}
+            type="tel"
+            value={phone}
+            onChange={(ev) => setPhone(ev.target.value)}
+            placeholder="+1 (555) 123-4567"
+          />
+          {errors.phone && (
+            <div className={styles.formError}>{errors.phone}</div>
+          )}
+        </label>
+      )}
+      {errors.contact && (
+        <div className={styles.formError}>{errors.contact}</div>
+      )}
+      <button
+        type="submit"
+        className={styles.formSubmitButton}
+        style={{ background: primaryColor }}
+      >
+        Start Chat
+      </button>
+    </form>
+  );
+}

package/src/PolymorphWidget.tsx

@@ -1,7 +1,7 @@
 import { LiveKitRoom } from "@livekit/components-react";
 import { MantineProvider } from "@mantine/core";
 import "@mantine/core/styles.css";
-import { useRef, useState } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
 import { RoomHandler } from "./RoomHandler";
 import styles from "./styles.module.css";
 import { buildWidgetTheme } from "./theme";
@@ -9,7 +9,6 @@ import type { WidgetConfig } from "./types";
 import { usePolymorphSession } from "./usePolymorphSession";
 import { WidgetPanel } from "./WidgetPanel";
 
-// Chat bubble icon for FAB
 function ChatIcon() {
   return (
     <svg
@@ -23,69 +22,106 @@ function ChatIcon() {
       strokeLinecap="round"
       strokeLinejoin="round"
     >
+      <title>Chat</title>
       <path d="M7.9 20A9 9 0 1 0 4 16.1L2 22Z" />
     </svg>
   );
 }
 
+function FabCloseIcon() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <title>Close</title>
+      <path d="M18 6 6 18" />
+      <path d="m6 6 12 12" />
+    </svg>
+  );
+}
+
 export function PolymorphWidget(props: WidgetConfig) {
-  const { position = "bottom-right", branding } = props;
   const [open, setOpen] = useState(false);
   const session = usePolymorphSession(props);
-  const primaryColor = branding?.primaryColor || "#171717";
+  const rc = session.resolvedConfig;
+  const primaryColor = rc?.primaryColor || "#171717";
+  const position = rc?.position || "bottom-right";
+  const darkMode = rc?.darkMode ?? false;
   const theme = buildWidgetTheme(primaryColor);
+  const { hasUnread, clearUnread, setPanelOpen } = session;
   const rootRef = useRef<HTMLDivElement>(null);
 
+  // Disconnect only when the user leaves the page (not when closing the panel)
+  useEffect(() => {
+    const handleBeforeUnload = () => session.disconnect();
+    window.addEventListener("beforeunload", handleBeforeUnload);
+    return () => {
+      window.removeEventListener("beforeunload", handleBeforeUnload);
+      session.disconnect();
+    };
+  }, [session.disconnect]);
+
+  const audio = useMemo(
+    () =>
+      session.isVoiceEnabled
+        ? {
+            echoCancellation: true,
+            noiseSuppression: true,
+            autoGainControl: true,
+          }
+        : false,
+    [session.isVoiceEnabled],
+  );
+
   return (
     <div
       ref={rootRef}
       className={`polymorph-widget ${styles.widgetRoot} ${position === "bottom-left" ? styles.bottomLeft : styles.bottomRight}`}
-      style={{ colorScheme: props.darkMode ? "dark" : "light" }}
+      style={{ colorScheme: darkMode ? "dark" : "light" }}
     >
       <MantineProvider
         theme={theme}
-        forceColorScheme={props.darkMode ? "dark" : "light"}
+        forceColorScheme={darkMode ? "dark" : "light"}
         cssVariablesSelector=".polymorph-widget"
         getRootElement={() => rootRef.current ?? undefined}
       >
-        {open && (
-          <WidgetPanel
-            config={props}
-            session={session}
-            onClose={() => {
-              session.disconnect();
-              setOpen(false);
-            }}
-          />
-        )}
+        <WidgetPanel
+          session={session}
+          onClose={() => {
+            setOpen(false);
+            setPanelOpen(false);
+          }}
+          hidden={!open}
+        />
         <button
+          key={session.wiggleKey}
           type="button"
-          className={styles.fab}
+          className={`${styles.fab} ${open ? styles.fabOpen : ""} ${hasUnread && !open ? styles.fabWiggle : ""}`}
           style={{ backgroundColor: primaryColor }}
           onClick={() => {
-            if (open) {
-              session.disconnect();
-            }
-            setOpen((prev) => !prev);
+            const next = !open;
+            setOpen(next);
+            setPanelOpen(next);
+            if (next) clearUnread();
           }}
         >
-          <ChatIcon />
+          {hasUnread && !open && <span className={styles.notificationDot} />}
+          {open ? <FabCloseIcon /> : <ChatIcon />}
         </button>
-        {/* LiveKit room lives outside WidgetPanel so it mounts before the panel renders */}
         {session.roomConnection && (
           <LiveKitRoom
             token={session.roomConnection.token}
             serverUrl={session.roomConnection.livekitUrl}
             connect={true}
-            audio={
-              session.isVoiceEnabled
-                ? {
-                    echoCancellation: true,
-                    noiseSuppression: true,
-                    autoGainControl: true,
-                  }
-                : false
-            }
+            audio={audio}
             video={false}
             style={{ display: "none" }}
             onDisconnected={session.disconnect}

package/src/RoomHandler.tsx

@@ -19,6 +19,8 @@ export function RoomHandler({
     role: "user" | "agent",
     text: string,
     source: "chat" | "voice",
+    senderName?: string,
+    senderType?: "human",
   ) => void;
   isVoiceEnabled: boolean;
 }) {
@@ -66,6 +68,8 @@ export function RoomHandler({
           const data = JSON.parse(new TextDecoder().decode(payload));
           if (data.type === "chat_response") {
             addMessage("agent", data.text, "chat");
+          } else if (data.sender_type === "observer" && data.text) {
+            addMessage("agent", data.text, "chat", data.sender_name, "human");
           }
         } catch {
           /* ignore malformed */
@@ -83,7 +87,23 @@ export function RoomHandler({
         const isAgent =
           participant?.kind === ParticipantKind.AGENT ||
           participant?.identity?.includes("agent");
-        addMessage(isAgent ? "agent" : "user", text, "voice");
+        // Observer transcriptions come from non-agent remote participants
+        // whose identity differs from the local (widget) user
+        const isObserver =
+          !isAgent &&
+          participant &&
+          participant.identity !== room.localParticipant.identity;
+        if (isObserver) {
+          addMessage(
+            "agent",
+            text,
+            "voice",
+            participant.name || participant.identity,
+            "human",
+          );
+        } else {
+          addMessage(isAgent ? "agent" : "user", text, "voice");
+        }
       }
     };
 
@@ -95,5 +115,5 @@ export function RoomHandler({
     };
   }, [room, addMessage]);
 
-  return <RoomAudioRenderer />;
+  return isVoiceEnabled ? <RoomAudioRenderer /> : null;
 }

package/src/VoiceOverlay.tsx

@@ -13,6 +13,8 @@ function VolumeIcon() {
       strokeWidth="2"
       strokeLinecap="round"
       strokeLinejoin="round"
+      role="img"
+      aria-label="Volume on"
     >
       <path d="M11 4.702a.705.705 0 0 0-1.203-.498L6.413 7.587A1.4 1.4 0 0 1 5.416 8H3a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h2.416a1.4 1.4 0 0 1 .997.413l3.383 3.384A.705.705 0 0 0 11 19.298z" />
       <path d="M16 9a5 5 0 0 1 0 6" />
@@ -21,6 +23,28 @@ function VolumeIcon() {
   );
 }
 
+function ScreenShareIcon() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="14"
+      height="14"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      role="img"
+      aria-label="Screen share"
+    >
+      <rect width="20" height="14" x="2" y="3" rx="2" />
+      <line x1="8" x2="16" y1="21" y2="21" />
+      <line x1="12" x2="12" y1="17" y2="21" />
+    </svg>
+  );
+}
+
 function VolumeOffIcon() {
   return (
     <svg
@@ -33,6 +57,8 @@ function VolumeOffIcon() {
       strokeWidth="2"
       strokeLinecap="round"
       strokeLinejoin="round"
+      role="img"
+      aria-label="Volume off"
     >
       <path d="M11 4.702a.705.705 0 0 0-1.203-.498L6.413 7.587A1.4 1.4 0 0 1 5.416 8H3a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h2.416a1.4 1.4 0 0 1 .997.413l3.383 3.384A.705.705 0 0 0 11 19.298z" />
       <line x1="22" x2="16" y1="9" y2="15" />
@@ -44,21 +70,27 @@ function VolumeOffIcon() {
 interface VoiceOverlayProps {
   isVoiceEnabled: boolean;
   isMicActive: boolean;
+  isScreenSharing?: boolean;
   status: SessionStatus;
   onToggleVoice: () => void;
+  onToggleScreenShare?: () => void;
+  showScreenShare?: boolean;
 }
 
 export function VoiceOverlay({
   isVoiceEnabled,
   isMicActive,
+  isScreenSharing,
   status,
   onToggleVoice,
+  onToggleScreenShare,
+  showScreenShare,
 }: VoiceOverlayProps) {
-  if (status !== "connected") return null;
+  const isConnecting = status === "connecting";
 
   return (
     <div className={styles.voiceOverlay}>
-      {isVoiceEnabled ? (
+      {isVoiceEnabled && status === "connected" ? (
         <>
           <span className={styles.voiceBars}>
             <span className={styles.voiceBar} />
@@ -70,16 +102,33 @@ export function VoiceOverlay({
           </span>
         </>
       ) : (
-        <span className={styles.voiceLabel}>Chat only</span>
+        <span className={styles.voiceLabel}>
+          {isConnecting ? "Connecting..." : "Chat only"}
+        </span>
       )}
-      <button
-        type="button"
-        className={`${styles.voiceToggle} ${isVoiceEnabled ? styles.voiceToggleActive : ""}`}
-        onClick={onToggleVoice}
-        title={isVoiceEnabled ? "Turn off voice" : "Turn on voice"}
-      >
-        {isVoiceEnabled ? <VolumeIcon /> : <VolumeOffIcon />}
-      </button>
+      <div className={styles.toggleGroup}>
+        {showScreenShare && status === "connected" && (
+          <button
+            type="button"
+            className={`${styles.voiceToggle} ${isScreenSharing ? styles.screenShareToggleActive : ""}`}
+            onClick={onToggleScreenShare}
+            title={isScreenSharing ? "Stop sharing" : "Share screen"}
+            aria-pressed={isScreenSharing}
+          >
+            <ScreenShareIcon />
+          </button>
+        )}
+        <button
+          type="button"
+          className={`${styles.voiceToggle} ${isVoiceEnabled && status === "connected" ? styles.voiceToggleActive : ""}`}
+          onClick={onToggleVoice}
+          disabled={isConnecting}
+          title={isVoiceEnabled ? "Turn off voice" : "Turn on voice"}
+          aria-pressed={isVoiceEnabled}
+        >
+          {isVoiceEnabled ? <VolumeIcon /> : <VolumeOffIcon />}
+        </button>
+      </div>
     </div>
   );
 }