polymorph-sdk 0.2.2 → 0.2.4

package/src/styles.module.css

@@ -8,21 +8,19 @@
   gap: 12px;
   pointer-events: none;
 }
-
 .bottomRight {
   top: 24px;
   bottom: 24px;
   right: 24px;
 }
-
 .bottomLeft {
   top: 24px;
   bottom: 24px;
   left: 24px;
   align-items: flex-start;
 }
-
 .fab {
+  position: relative;
   width: 56px;
   height: 56px;
   border-radius: 28px;
@@ -38,15 +36,73 @@
   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);
 }
-
+.fab:focus-visible {
+  outline: 2px solid white;
+  outline-offset: 2px;
+}
+.notificationDot {
+  position: absolute;
+  top: 2px;
+  right: 2px;
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  background: #ef4444;
+  border: 2px solid white;
+  animation: notificationPulse 2s ease-in-out infinite;
+}
+@keyframes notificationPulse {
+  0%,
+  100% {
+    transform: scale(1);
+    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4);
+  }
+  50% {
+    transform: scale(1.1);
+    box-shadow: 0 0 0 4px rgba(239, 68, 68, 0);
+  }
+}
+.fabWiggle {
+  animation: fabWiggle 0.6s ease-in-out;
+}
+@keyframes fabWiggle {
+  0% {
+    transform: rotate(0deg);
+  }
+  15% {
+    transform: rotate(-12deg);
+  }
+  30% {
+    transform: rotate(10deg);
+  }
+  45% {
+    transform: rotate(-8deg);
+  }
+  60% {
+    transform: rotate(6deg);
+  }
+  75% {
+    transform: rotate(-2deg);
+  }
+  100% {
+    transform: rotate(0deg);
+  }
+}
 .panel {
   width: 380px;
-  max-height: 600px;
+  height: 400px;
+  flex-shrink: 0;
+  min-height: 0;
   display: flex;
   flex-direction: column;
   border-radius: 16px;
@@ -57,8 +113,16 @@
   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);
@@ -66,7 +130,6 @@
   justify-content: space-between;
   align-items: flex-start;
 }
-
 .chatThread {
   flex: 1;
   overflow-y: auto;
@@ -74,10 +137,8 @@
   display: flex;
   flex-direction: column;
   gap: 8px;
-  min-height: 200px;
-  max-height: 400px;
+  min-height: 0;
 }
-
 .messageBubble {
   max-width: 80%;
   padding: 8px 12px;
@@ -85,25 +146,38 @@
   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;
 }
-
+.senderLabel {
+  font-size: 11px;
+  font-weight: 500;
+  opacity: 0.7;
+  margin-bottom: 2px;
+}
 .voiceLabel {
   font-size: 10px;
   opacity: 0.6;
   margin-top: 2px;
 }
-
 .voiceOverlay {
   padding: 8px 16px;
   display: flex;
@@ -113,21 +187,18 @@
   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;
+  background: light-dark(#16a34a, #4ade80);
   animation: voiceBar 1.2s ease-in-out infinite;
 }
-
 .voiceBar:nth-child(1) {
   height: 6px;
   animation-delay: 0s;
@@ -140,7 +211,6 @@
   height: 8px;
   animation-delay: 0.4s;
 }
-
 @keyframes voiceBar {
   0%,
   100% {
@@ -150,12 +220,15 @@
     transform: scaleY(0.4);
   }
 }
-
-.voiceToggle {
+.toggleGroup {
   margin-left: auto;
-  width: 28px;
-  height: 28px;
-  border-radius: 14px;
+  display: flex;
+  gap: 6px;
+}
+.voiceToggle {
+  width: 36px;
+  height: 36px;
+  border-radius: 18px;
   border: 1px solid var(--mantine-color-default-border);
   cursor: pointer;
   display: flex;
@@ -165,45 +238,58 @@
   color: var(--mantine-color-dimmed);
   transition: all 150ms ease;
 }
-
 .voiceToggle:hover {
   background: var(--mantine-color-gray-light-hover);
 }
-
+.voiceToggle:focus-visible {
+  outline: 2px solid var(--mantine-primary-color-filled);
+  outline-offset: 1px;
+}
 .voiceToggleActive {
   background: light-dark(#dcfce7, #1a3a2a);
   border-color: light-dark(#bbf7d0, #2a5a3a);
   color: light-dark(#16a34a, #4ade80);
 }
-
 .voiceToggleActive:hover {
   background: light-dark(#bbf7d0, #2a5a3a);
 }
-
+.screenShareToggleActive {
+  background: light-dark(#dbeafe, #1e3a5f);
+  border-color: light-dark(#93c5fd, #3b82f6);
+  color: light-dark(#2563eb, #60a5fa);
+}
+.screenShareToggleActive:hover {
+  background: light-dark(#bfdbfe, #2a4a6f);
+}
 .inputBar {
   padding: 12px 16px;
   border-top: 1px solid var(--mantine-color-default-border);
   display: flex;
   gap: 8px;
-  align-items: center;
+  align-items: flex-end;
 }
-
 .inputField {
   flex: 1;
   border: 1px solid var(--mantine-color-default-border);
   border-radius: 8px;
   padding: 8px 12px;
-  font-size: 14px;
+  font-size: 16px;
+  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);
 }
-
+.inputField:focus-visible {
+  outline: 2px solid var(--mantine-primary-color-filled);
+  outline-offset: -1px;
+}
 .iconButton {
   width: 36px;
   height: 36px;
@@ -218,62 +304,39 @@
   transition:
     background 150ms ease,
     color 150ms ease;
+  flex-shrink: 0;
 }
-
 .iconButton:hover {
   background: var(--mantine-color-gray-light);
 }
-
+.iconButton:focus-visible {
+  outline: 2px solid var(--mantine-primary-color-filled);
+  outline-offset: 1px;
+}
 .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;
+  color: light-dark(#16a34a, #4ade80);
 }
-
 .statusBadge {
   font-size: 11px;
   padding: 2px 8px;
   border-radius: 10px;
   font-weight: 500;
 }
-
 .errorText {
-  color: #dc2626;
+  color: light-dark(#dc2626, #f87171);
   font-size: 13px;
   padding: 0 16px;
 }
-
 .thinkingDots {
   display: flex;
   gap: 4px;
   align-items: center;
   height: 20px;
 }
-
 .thinkingDots span {
   width: 6px;
   height: 6px;
@@ -281,15 +344,12 @@
   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%,
@@ -302,3 +362,79 @@
     transform: scale(1);
   }
 }
+.identityForm {
+  padding: 20px 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+  flex: 1;
+  overflow-y: auto;
+}
+.formField {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+.formLabel {
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--mantine-color-text);
+}
+.formInput {
+  border: 1px solid var(--mantine-color-default-border);
+  border-radius: 8px;
+  padding: 8px 12px;
+  font-size: 16px;
+  line-height: 1.4;
+  outline: none;
+  font-family: inherit;
+  background: var(--mantine-color-body);
+  color: var(--mantine-color-text);
+}
+.formInput:focus {
+  border-color: var(--mantine-color-dimmed);
+}
+.formInput:focus-visible {
+  outline: 2px solid var(--mantine-primary-color-filled);
+  outline-offset: -1px;
+}
+.formError {
+  font-size: 12px;
+  color: light-dark(#dc2626, #f87171);
+}
+.formSubmitButton {
+  margin-top: 4px;
+  padding: 10px 16px;
+  border: none;
+  border-radius: 8px;
+  font-size: 14px;
+  font-weight: 500;
+  color: white;
+  cursor: pointer;
+  transition: opacity 150ms ease;
+}
+.formSubmitButton:hover {
+  opacity: 0.9;
+}
+.formSubmitButton:focus-visible {
+  outline: 2px solid white;
+  outline-offset: 2px;
+}
+
+/* Mobile: full-width panel on small screens */
+@media (max-width: 420px) {
+  .bottomRight,
+  .bottomLeft {
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    padding: 12px;
+  }
+  .panel {
+    width: 100%;
+    height: auto;
+    flex: 1;
+    border-radius: 12px;
+  }
+}

package/src/types.ts

@@ -1,28 +1,49 @@
 export interface WidgetConfig {
-  apiBaseUrl: string;
+  /** Backend API URL. Defaults to https://api.usepolymorph.com in production, http://localhost:8080 on localhost. */
+  apiBaseUrl?: string;
   apiKey?: string;
+  /** Server-side widget config ID. When omitted, the org's default config is used. */
+  configId?: string;
   /** LiveKit dispatched agent name (default: "custom-voice-agent"). */
   agentName?: string;
+  /** Inline metadata (only used when no server-side config is resolved). */
   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;
+  /** Pre-filled user identity. When provided, the identity form is skipped. */
+  user?: WidgetUser;
   /** Extra options passed to fetch (e.g. { credentials: "include" }) */
   fetchOptions?: RequestInit;
-  /** Render widget in dark mode (default: false) */
-  darkMode?: boolean;
+  /** Called when a session starts with room info for constructing join URLs. */
+  onSessionStart?: (info: { roomId: string; joinToken: string }) => void;
 }
 
-export interface WidgetBranding {
-  /** FAB and accent color (default: "#171717") */
-  primaryColor?: string;
-  /** Panel header title (default: "Hi there") */
-  title?: string;
-  /** Panel subheader */
-  subtitle?: string;
-  /** Initial message shown before agent connects */
-  greeting?: string;
+export interface WidgetUser {
+  /** Display name (e.g. "Jane Smith") */
+  name?: string;
+  /** Email address */
+  email?: string;
+  /** Phone number */
+  phone?: string;
+}
+
+/** Resolved from the backend via /widget-configs/resolve. */
+export interface ResolvedWidgetConfig {
+  id: string;
+  title: string;
+  subtitle: string;
+  primaryColor: string;
+  position: "bottom-right" | "bottom-left";
+  darkMode: boolean;
+  enableVoice: boolean;
+  greeting: string;
+  collectEmail: FieldRequirement;
+  collectPhone: FieldRequirement;
+}
+
+export type FieldRequirement = "required" | "optional" | "hidden";
+
+export interface IdentityCollection {
+  collectEmail: FieldRequirement;
+  collectPhone: FieldRequirement;
 }
 
 export interface ChatMessage {
@@ -31,6 +52,8 @@ export interface ChatMessage {
   text: string;
   source: "chat" | "voice";
   timestamp: number;
+  senderName?: string;
+  senderType?: "human";
 }
 
 export type SessionStatus = "idle" | "connecting" | "connected" | "error";