polymorph-sdk 0.2.2 → 0.2.3

package/src/WidgetPanel.tsx

@@ -1,11 +1,10 @@
 import type { Room } from "livekit-client";
-import { useCallback, useState } from "react";
+import { useCallback, useRef, useState } from "react";
 import { ChatThread } from "./ChatThread";
 import styles from "./styles.module.css";
 import type { ChatMessage, SessionStatus, WidgetConfig } from "./types";
 import { VoiceOverlay } from "./VoiceOverlay";
 
-// Internal SVG icons (no @tabler dependency)
 function MicIcon() {
   return (
     <svg
@@ -19,6 +18,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 +38,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 +61,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 +80,7 @@ function CloseIcon() {
       strokeLinecap="round"
       strokeLinejoin="round"
     >
+      <title>Close</title>
       <path d="M18 6 6 18" />
       <path d="m6 6 12 12" />
     </svg>
@@ -106,10 +109,17 @@ interface WidgetPanelProps {
     setRoom: (room: Room | null) => void;
   };
   onClose: () => void;
+  hidden?: boolean;
 }
 
-export function WidgetPanel({ config, session, onClose }: WidgetPanelProps) {
+export function WidgetPanel({
+  config,
+  session,
+  onClose,
+  hidden,
+}: WidgetPanelProps) {
   const [inputValue, setInputValue] = useState("");
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
   const primaryColor = config.branding?.primaryColor || "#171717";
   const isChatOnlyAgent = (config.agentName || "")
     .toLowerCase()
@@ -119,6 +129,8 @@ export function WidgetPanel({ config, session, onClose }: WidgetPanelProps) {
     if (!inputValue.trim()) return;
     session.sendMessage(inputValue);
     setInputValue("");
+    const el = textareaRef.current;
+    if (el) el.style.height = "auto";
   }, [inputValue, session]);
 
   const handleKeyDown = useCallback(
@@ -131,9 +143,18 @@ 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 }}>
@@ -155,15 +176,11 @@ 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}
@@ -172,47 +189,34 @@ export function WidgetPanel({ config, session, onClose }: WidgetPanelProps) {
           onToggleVoice={session.toggleVoice}
         />
       )}
-
-      {/* 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" ? (
+      <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.connectButton}
-          style={{ backgroundColor: primaryColor }}
-          disabled
+          className={styles.iconButton}
+          onClick={handleSend}
+          disabled={!inputValue.trim() || session.status === "connecting"}
         >
-          Connecting...
+          <SendIcon />
         </button>
-      ) : (
-        <div className={styles.inputBar}>
-          <input
-            className={styles.inputField}
-            placeholder="Type a message..."
-            value={inputValue}
-            onChange={(e) => setInputValue(e.target.value)}
-            onKeyDown={handleKeyDown}
-          />
-          <button
-            type="button"
-            className={styles.iconButton}
-            onClick={handleSend}
-            disabled={!inputValue.trim()}
-          >
-            <SendIcon />
-          </button>
-          {session.isVoiceEnabled && !isChatOnlyAgent && (
+        {session.isVoiceEnabled &&
+          !isChatOnlyAgent &&
+          session.status === "connected" && (
             <button
               type="button"
               className={`${styles.iconButton} ${session.isMicActive ? styles.iconButtonActive : ""}`}
@@ -221,8 +225,7 @@ export function WidgetPanel({ config, session, onClose }: WidgetPanelProps) {
               {session.isMicActive ? <MicIcon /> : <MicOffIcon />}
             </button>
           )}
-        </div>
-      )}
+      </div>
     </div>
   );
 }

package/src/styles.module.css

@@ -1,304 +1,41 @@
-.widgetRoot {
-  position: fixed;
-  z-index: 9999;
-  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;
-}
-
-.fab {
-  width: 56px;
-  height: 56px;
-  border-radius: 28px;
-  border: none;
-  cursor: pointer;
-  display: flex;
-  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;
-  color: white;
-  pointer-events: auto;
-}
-
-.fab:hover {
-  transform: scale(1.05);
-  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
-}
-
-.panel {
-  width: 380px;
-  max-height: 600px;
-  display: flex;
-  flex-direction: column;
-  border-radius: 16px;
-  box-shadow:
-    0 4px 24px rgba(0, 0, 0, 0.08),
-    0 12px 48px rgba(0, 0, 0, 0.12);
-  overflow: hidden;
-  background: var(--mantine-color-body);
-  color: var(--mantine-color-text);
-  pointer-events: auto;
-}
-
-.header {
-  padding: 16px 16px 12px;
-  border-bottom: 1px solid var(--mantine-color-default-border);
-  display: flex;
-  justify-content: space-between;
-  align-items: flex-start;
-}
-
-.chatThread {
-  flex: 1;
-  overflow-y: auto;
-  padding: 16px;
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  min-height: 200px;
-  max-height: 400px;
-}
-
-.messageBubble {
-  max-width: 80%;
-  padding: 8px 12px;
-  border-radius: 12px;
-  font-size: 14px;
-  line-height: 1.4;
-  word-wrap: break-word;
-}
-
-.agentMessage {
-  align-self: flex-start;
-  background: var(--mantine-color-gray-light);
-  color: var(--mantine-color-text);
-}
-
-.userMessage {
-  align-self: flex-end;
-  color: white;
-}
-
-.voiceLabel {
-  font-size: 10px;
-  opacity: 0.6;
-  margin-top: 2px;
-}
-
-.voiceOverlay {
-  padding: 8px 16px;
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  font-size: 13px;
-  color: var(--mantine-color-dimmed);
-  border-top: 1px solid var(--mantine-color-default-border);
-}
-
-.voiceBars {
-  display: flex;
-  align-items: center;
-  gap: 2px;
-  height: 16px;
-}
-
-.voiceBar {
-  width: 3px;
-  border-radius: 2px;
-  background: #22c55e;
-  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;
-}
-
-@keyframes voiceBar {
-  0%,
-  100% {
-    transform: scaleY(1);
-  }
-  50% {
-    transform: scaleY(0.4);
-  }
-}
-
-.voiceToggle {
-  margin-left: auto;
-  width: 28px;
-  height: 28px;
-  border-radius: 14px;
-  border: 1px solid var(--mantine-color-default-border);
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: var(--mantine-color-gray-light);
-  color: var(--mantine-color-dimmed);
-  transition: all 150ms ease;
-}
-
-.voiceToggle:hover {
-  background: var(--mantine-color-gray-light-hover);
-}
-
-.voiceToggleActive {
-  background: light-dark(#dcfce7, #1a3a2a);
-  border-color: light-dark(#bbf7d0, #2a5a3a);
-  color: light-dark(#16a34a, #4ade80);
-}
-
-.voiceToggleActive:hover {
-  background: light-dark(#bbf7d0, #2a5a3a);
-}
-
-.inputBar {
-  padding: 12px 16px;
-  border-top: 1px solid var(--mantine-color-default-border);
-  display: flex;
-  gap: 8px;
-  align-items: center;
-}
-
-.inputField {
-  flex: 1;
-  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: var(--mantine-color-dimmed);
-}
-
-.iconButton {
-  width: 36px;
-  height: 36px;
-  border-radius: 8px;
-  border: none;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: transparent;
-  color: var(--mantine-color-dimmed);
-  transition:
-    background 150ms ease,
-    color 150ms ease;
-}
-
-.iconButton:hover {
-  background: var(--mantine-color-gray-light);
-}
-
-.iconButton:disabled {
-  opacity: 0.4;
-  cursor: default;
-}
-
-.iconButtonActive {
-  color: #22c55e;
-}
-
-.connectButton {
-  margin: 16px;
-  padding: 10px 20px;
-  border-radius: 8px;
-  border: none;
-  cursor: pointer;
-  font-size: 14px;
-  font-weight: 500;
-  color: white;
-  transition: opacity 150ms ease;
-}
-
-.connectButton:hover {
-  opacity: 0.9;
-}
-
-.connectButton:disabled {
-  opacity: 0.5;
-  cursor: default;
-}
-
-.statusBadge {
-  font-size: 11px;
-  padding: 2px 8px;
-  border-radius: 10px;
-  font-weight: 500;
-}
-
-.errorText {
-  color: #dc2626;
-  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);
-  }
-}
+.widgetRoot { position: fixed; z-index: 9999; 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; }
+.fab { width: 56px; height: 56px; border-radius: 28px; border: none; cursor: pointer; display: flex; 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; color: white; pointer-events: auto; }
+.fab svg { transition: transform 200ms ease; }
+.fabOpen svg { transform: rotate(90deg); }
+.fab:hover { transform: scale(1.05); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2); }
+.panel { width: 380px; max-height: 600px; flex-shrink: 1; min-height: 0; display: flex; flex-direction: column; border-radius: 16px; box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08), 0 12px 48px rgba(0, 0, 0, 0.12); overflow: hidden; background: var(--mantine-color-body); color: var(--mantine-color-text); pointer-events: auto; transition: opacity 200ms ease, transform 200ms ease; transform-origin: bottom right; }
+.panelHidden { opacity: 0; transform: scale(0.95) translateY(8px); pointer-events: none; }
+.header { padding: 16px 16px 12px; border-bottom: 1px solid var(--mantine-color-default-border); display: flex; justify-content: space-between; align-items: flex-start; }
+.chatThread { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 8px; min-height: 0; }
+.messageBubble { max-width: 80%; padding: 8px 12px; border-radius: 12px; font-size: 14px; line-height: 1.4; word-wrap: break-word; animation: messageAppear 200ms ease; }
+@keyframes messageAppear { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
+.agentMessage { align-self: flex-start; background: var(--mantine-color-gray-light); color: var(--mantine-color-text); }
+.userMessage { align-self: flex-end; color: white; }
+.voiceLabel { font-size: 10px; opacity: 0.6; margin-top: 2px; }
+.voiceOverlay { padding: 8px 16px; display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--mantine-color-dimmed); border-top: 1px solid var(--mantine-color-default-border); }
+.voiceBars { display: flex; align-items: center; gap: 2px; height: 16px; }
+.voiceBar { width: 3px; border-radius: 2px; background: #22c55e; 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; }
+@keyframes voiceBar { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(0.4); } }
+.voiceToggle { margin-left: auto; width: 28px; height: 28px; border-radius: 14px; border: 1px solid var(--mantine-color-default-border); cursor: pointer; display: flex; align-items: center; justify-content: center; background: var(--mantine-color-gray-light); color: var(--mantine-color-dimmed); transition: all 150ms ease; }
+.voiceToggle:hover { background: var(--mantine-color-gray-light-hover); }
+.voiceToggleActive { background: light-dark(#dcfce7, #1a3a2a); border-color: light-dark(#bbf7d0, #2a5a3a); color: light-dark(#16a34a, #4ade80); }
+.voiceToggleActive:hover { background: light-dark(#bbf7d0, #2a5a3a); }
+.inputBar { padding: 12px 16px; border-top: 1px solid var(--mantine-color-default-border); display: flex; gap: 8px; align-items: flex-end; }
+.inputField { flex: 1; border: 1px solid var(--mantine-color-default-border); border-radius: 8px; padding: 8px 12px; font-size: 14px; line-height: 1.4; outline: none; font-family: inherit; background: var(--mantine-color-body); color: var(--mantine-color-text); resize: none; overflow-y: auto; max-height: 120px; }
+.inputField:focus { border-color: var(--mantine-color-dimmed); }
+.iconButton { width: 36px; height: 36px; border-radius: 8px; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; background: transparent; color: var(--mantine-color-dimmed); transition: background 150ms ease, color 150ms ease; flex-shrink: 0; }
+.iconButton:hover { background: var(--mantine-color-gray-light); }
+.iconButton:disabled { opacity: 0.4; cursor: default; }
+.iconButtonActive { color: #22c55e; }
+.statusBadge { font-size: 11px; padding: 2px 8px; border-radius: 10px; font-weight: 500; }
+.errorText { color: #dc2626; 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,9 +1,13 @@
 export interface WidgetConfig {
   apiBaseUrl: string;
   apiKey?: string;
+  /** Server-side widget config ID. When set, metadata is ignored and config is resolved server-side. */
+  configId?: string;
   /** LiveKit dispatched agent name (default: "custom-voice-agent"). */
   agentName?: string;
   metadata?: Record<string, string | string[]>;
+  /** Pre-filled user identity. When provided, the agent skips asking for these fields. */
+  user?: WidgetUser;
   branding?: WidgetBranding;
   position?: "bottom-right" | "bottom-left";
   /** Enable voice call (default: true). When false, widget is chat-only. */
@@ -14,6 +18,15 @@ export interface WidgetConfig {
   darkMode?: boolean;
 }
 
+export interface WidgetUser {
+  /** Display name (e.g. "Jane Smith") */
+  name?: string;
+  /** Email address */
+  email?: string;
+  /** Phone number */
+  phone?: string;
+}
+
 export interface WidgetBranding {
   /** FAB and accent color (default: "#171717") */
   primaryColor?: string;

package/src/usePolymorphSession.ts

@@ -42,11 +42,25 @@ export function usePolymorphSession(config: WidgetConfig) {
   const [roomConnection, setRoomConnection] = useState<RoomConnection | null>(
     null,
   );
-  const [messages, setMessages] = useState<ChatMessage[]>([]);
+  const greeting = config.branding?.greeting;
+  const [messages, setMessages] = useState<ChatMessage[]>(() =>
+    greeting
+      ? [
+          {
+            id: "greeting",
+            role: "agent" as const,
+            text: greeting,
+            source: "chat" as const,
+            timestamp: Date.now(),
+          },
+        ]
+      : [],
+  );
   const [isVoiceEnabled, setIsVoiceEnabled] = useState(defaultVoiceEnabled);
   const [isMicActive, setIsMicActive] = useState(defaultVoiceEnabled);
   const [error, setError] = useState<string | null>(null);
   const roomRef = useRef<Room | null>(null);
+  const pendingMessagesRef = useRef<string[]>([]);
 
   useEffect(() => {
     setIsVoiceEnabled(defaultVoiceEnabled);
@@ -109,12 +123,19 @@ 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: config.configId ?? undefined,
+          metadata: config.configId
+            ? undefined
+            : {
+                ...config.metadata,
+                ...(config.branding?.greeting && {
+                  greeting: config.branding.greeting,
+                }),
+                ...(config.user?.name && { user_name: config.user.name }),
+                ...(config.user?.email && { user_email: config.user.email }),
+                ...(config.user?.phone && { user_phone: config.user.phone }),
+              },
+          user_name: config.user?.name,
           external_user_id: externalUserId,
         }),
         ...restFetchOptions,
@@ -142,18 +163,25 @@ export function usePolymorphSession(config: WidgetConfig) {
 
   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 () => {
@@ -182,7 +210,18 @@ export function usePolymorphSession(config: WidgetConfig) {
 
   const setRoom = useCallback((room: Room | null) => {
     roomRef.current = room;
-    if (room) setStatus("connected");
+    if (room) {
+      setStatus("connected");
+      // Flush any messages queued before the room was ready
+      const pending = pendingMessagesRef.current.splice(0);
+      for (const text of pending) {
+        const payload = new TextEncoder().encode(JSON.stringify({ text }));
+        room.localParticipant.publishData(payload, {
+          reliable: true,
+          topic: "chat_message",
+        });
+      }
+    }
   }, []);
 
   return {