@thisispamela/react 1.0.0 → 1.0.1

package/README.md

@@ -1,11 +1,11 @@
-# @pamela/react
+# @thisispamela/react
 
 React component library for easy integration of Pamela Voice API into your React applications.
 
 ## Installation
 
 ```bash
-npm install @pamela/react @pamela/sdk
+npm install @thisispamela/react @thisispamela/sdk
 ```
 
 ## Quick Start
@@ -13,7 +13,7 @@ npm install @pamela/react @pamela/sdk
 ### 1. Wrap your app with PamelaProvider
 
 ```tsx
-import { PamelaProvider } from '@pamela/react';
+import { PamelaProvider } from '@thisispamela/react';
 
 function App() {
   return (
@@ -32,7 +32,7 @@ function App() {
 ### 2. Use the components
 
 ```tsx
-import { CallButton, CallStatus } from '@pamela/react';
+import { CallButton, CallStatus } from '@thisispamela/react';
 
 function MyComponent() {
   const [callId, setCallId] = useState<string | null>(null);
@@ -168,7 +168,7 @@ Displays a list of previous calls (requires API endpoint).
 Access the Pamela client directly for custom integrations.
 
 ```tsx
-import { usePamela } from '@pamela/react';
+import { usePamela } from '@thisispamela/react';
 
 function MyComponent() {
   const { client } = usePamela();
@@ -220,7 +220,7 @@ Or use the `className` prop on any component to add your own classes.
 
 ```tsx
 import React, { useState } from 'react';
-import { PamelaProvider, CallButton, CallStatus, TranscriptViewer } from '@pamela/react';
+import { PamelaProvider, CallButton, CallStatus, TranscriptViewer } from '@thisispamela/react';
 
 function App() {
   return (

package/dist/CallButton.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 import { CallButtonProps } from './types';
-export declare function CallButton({ to, task, country, locale, instructions, end_user_id, metadata, onCallStart, onCallComplete, onError, disabled, className, children, }: CallButtonProps): React.JSX.Element;
+export declare function CallButton({ to, task, country, locale, instructions, end_user_id, metadata, tools, webhooks, onCallStart, onCallComplete, onError, disabled, className, children, }: CallButtonProps): React.JSX.Element;
 //# sourceMappingURL=CallButton.d.ts.map

package/dist/CallButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CallButton.d.ts","sourceRoot":"","sources":["../src/CallButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAExC,OAAO,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAE1C,wBAAgB,UAAU,CAAC,EACzB,EAAE,EACF,IAAI,EACJ,OAAO,EACP,MAAM,EACN,YAAY,EACZ,WAAW,EACX,QAAQ,EACR,WAAW,EACX,cAAc,EACd,OAAO,EACP,QAAgB,EAChB,SAAc,EACd,QAAQ,GACT,EAAE,eAAe,qBA2EjB"}
+{"version":3,"file":"CallButton.d.ts","sourceRoot":"","sources":["../src/CallButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAExC,OAAO,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAE1C,wBAAgB,UAAU,CAAC,EACzB,EAAE,EACF,IAAI,EACJ,OAAO,EACP,MAAM,EACN,YAAY,EACZ,WAAW,EACX,QAAQ,EACR,KAAK,EACL,QAAQ,EACR,WAAW,EACX,cAAc,EACd,OAAO,EACP,QAAgB,EAChB,SAAc,EACd,QAAQ,GACT,EAAE,eAAe,qBA6DjB"}

package/dist/CallHistory.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CallHistory.d.ts","sourceRoot":"","sources":["../src/CallHistory.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAEnD,OAAO,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAG3C,wBAAgB,WAAW,CAAC,EAC1B,KAAU,EACV,YAAY,EACZ,SAAc,GACf,EAAE,gBAAgB,qBA6FlB"}
+{"version":3,"file":"CallHistory.d.ts","sourceRoot":"","sources":["../src/CallHistory.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAEnD,OAAO,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAG3C,wBAAgB,WAAW,CAAC,EAC1B,KAAU,EACV,YAAY,EACZ,SAAc,GACf,EAAE,gBAAgB,qBAgHlB"}

package/dist/CallStatus.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CallStatus.d.ts","sourceRoot":"","sources":["../src/CallStatus.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAEnD,OAAO,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AA0G1C,wBAAgB,UAAU,CAAC,EACzB,MAAM,EACN,YAAmB,EACnB,cAAc,EACd,cAAqB,EACrB,SAAc,GACf,EAAE,eAAe,qBAqJjB"}
+{"version":3,"file":"CallStatus.d.ts","sourceRoot":"","sources":["../src/CallStatus.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAEnD,OAAO,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AA4H1C,wBAAgB,UAAU,CAAC,EACzB,MAAM,EACN,YAAmB,EACnB,cAAc,EACd,cAAqB,EACrB,SAAc,GACf,EAAE,eAAe,qBA2IjB"}

package/dist/PamelaProvider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PamelaProvider.d.ts","sourceRoot":"","sources":["../src/PamelaProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAA6B,SAAS,EAAE,MAAM,OAAO,CAAC;AACpE,OAAO,EAAE,YAAY,EAAsB,MAAM,mBAAmB,CAAC;AACrE,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAEvC,UAAU,kBAAkB;IAC1B,MAAM,EAAE,YAAY,CAAC;CACtB;AAID,MAAM,WAAW,mBAAmB;IAClC,MAAM,EAAE,YAAY,CAAC;IACrB,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,wBAAgB,cAAc,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,EAAE,mBAAmB,qBAWvE;AAED,wBAAgB,SAAS,IAAI,kBAAkB,CAM9C"}
+{"version":3,"file":"PamelaProvider.d.ts","sourceRoot":"","sources":["../src/PamelaProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAA6B,SAAS,EAAW,MAAM,OAAO,CAAC;AAC7E,OAAO,EAAE,YAAY,EAAsB,MAAM,mBAAmB,CAAC;AACrE,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAEvC,UAAU,kBAAkB;IAC1B,MAAM,EAAE,YAAY,CAAC;CACtB;AAID,MAAM,WAAW,mBAAmB;IAClC,MAAM,EAAE,YAAY,CAAC;IACrB,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,wBAAgB,cAAc,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,EAAE,mBAAmB,qBAevE;AAED,wBAAgB,SAAS,IAAI,kBAAkB,CAM9C"}

package/dist/TranscriptViewer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TranscriptViewer.d.ts","sourceRoot":"","sources":["../src/TranscriptViewer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAEhD,wBAAgB,gBAAgB,CAAC,EAAE,UAAU,EAAE,SAAc,EAAE,EAAE,qBAAqB,qBA8GrF"}
+{"version":3,"file":"TranscriptViewer.d.ts","sourceRoot":"","sources":["../src/TranscriptViewer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAEhD,wBAAgB,gBAAgB,CAAC,EAAE,UAAU,EAAE,SAAc,EAAE,EAAE,qBAAqB,qBAmHrF"}

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import React, { ReactNode } from 'react';
-import { CallStatus as CallStatus$1, PamelaClient } from '@thisispamela/sdk';
+import { CreateCallRequest, CallStatus as CallStatus$1, PamelaClient } from '@thisispamela/sdk';
 
 interface PamelaConfig {
     apiKey: string;
@@ -13,6 +13,8 @@ interface CallButtonProps {
     instructions?: string;
     end_user_id?: string;
     metadata?: Record<string, any>;
+    tools?: CreateCallRequest["tools"];
+    webhooks?: CreateCallRequest["webhooks"];
     onCallStart?: (callId: string) => void;
     onCallComplete?: (call: CallStatus$1) => void;
     onError?: (error: Error) => void;
@@ -51,7 +53,7 @@ interface PamelaProviderProps {
 declare function PamelaProvider({ config, children }: PamelaProviderProps): React.JSX.Element;
 declare function usePamela(): PamelaContextValue;
 
-declare function CallButton({ to, task, country, locale, instructions, end_user_id, metadata, onCallStart, onCallComplete, onError, disabled, className, children, }: CallButtonProps): React.JSX.Element;
+declare function CallButton({ to, task, country, locale, instructions, end_user_id, metadata, tools, webhooks, onCallStart, onCallComplete, onError, disabled, className, children, }: CallButtonProps): React.JSX.Element;
 
 declare function CallStatus({ callId, pollInterval, onStatusChange, showTranscript, className, }: CallStatusProps): React.JSX.Element;
 

package/dist/index.esm.js

@@ -1,4 +1,4 @@
-import React, { createContext, useContext, useState, useEffect } from 'react';
+import React, { createContext, useMemo, useContext, useState, useEffect } from 'react';
 import { PamelaClient } from '@thisispamela/sdk';
 
 function styleInject(css, ref) {
@@ -28,15 +28,15 @@ function styleInject(css, ref) {
   }
 }
 
-var css_248z = "/**\n * Pamela B2B React Component Library - Default Styles\n * \n * These styles match the Pamela B2C design system:\n * - Colors: Orange (#FA931C), Beige (#e7ab84), Blue (#4b4bea)\n * - Fonts: Poppins, Inter\n * - Dark mode support\n */\n\n/* Pulse animation for status indicators */\n@keyframes pamela-pulse {\n  0%, 100% {\n    opacity: 1;\n  }\n  50% {\n    opacity: 0.5;\n  }\n}\n\n/* Call Button - matches your gradient style */\n.pamela-call-button {\n  font-family: 'Poppins', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;\n  background: linear-gradient(to right, #FA931C, #fd8b74);\n  color: white;\n  border: none;\n  border-radius: 0.5rem;\n  font-weight: 600;\n  transition: opacity 0.2s;\n  box-shadow: 0 2px 4px rgba(250, 147, 28, 0.2);\n}\n\n.pamela-call-button:hover:not(:disabled) {\n  opacity: 0.9;\n}\n\n.pamela-call-button:disabled {\n  opacity: 0.7;\n  cursor: not-allowed;\n  background: linear-gradient(to right, #ccc, #aaa);\n}\n\n/* Call Status - matches your card style */\n.pamela-call-status {\n  font-family: 'Poppins', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;\n}\n\n/* Transcript Viewer - matches your message bubble style */\n.pamela-transcript-viewer {\n  font-family: 'Poppins', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;\n}\n\n/* Dark mode support */\n@media (prefers-color-scheme: dark) {\n  .pamela-call-status {\n    color: #ffffff;\n  }\n  \n  .pamela-transcript-viewer {\n    color: #ffffff;\n  }\n}\n\n";
+var css_248z = "/**\n * Pamela Enterprise React Component Library - Default Styles\n *\n * These styles align with the Pamela app design schema.\n * If the host app already defines these CSS variables, its values will win.\n */\n\n:root {\n  --accent: #F27A1A;\n  --accent-2: #F06C4F;\n  --accent-3: #F3A84C;\n  --accent-gradient: linear-gradient(90deg, var(--accent), var(--accent-2));\n  --bg-gradient: linear-gradient(135deg, #F5F0E8 0%, #F3EEE8 45%, #EFE8DF 100%);\n  --bg-glow: radial-gradient(1200px circle at 10% 20%, rgba(250, 147, 28, 0.1), transparent 58%),\n    radial-gradient(900px circle at 80% 10%, rgba(253, 139, 116, 0.1), transparent 62%),\n    radial-gradient(800px circle at 70% 80%, rgba(251, 193, 107, 0.08), transparent 60%);\n  --surface: rgba(255, 255, 255, 0.5);\n  --surface-strong: rgba(255, 255, 255, 0.78);\n  --surface-border: rgba(231, 171, 132, 0.24);\n  --surface-border-strong: rgba(255, 255, 255, 0.75);\n  --surface-highlight: rgba(255, 255, 255, 0.68);\n  --surface-liquid: linear-gradient(135deg, rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0.38));\n  --surface-liquid-strong: linear-gradient(140deg, rgba(255, 255, 255, 0.88), rgba(255, 255, 255, 0.5));\n  --liquid-shadow: 0 18px 42px rgba(28, 25, 17, 0.14);\n  --liquid-glow: 0 0 32px rgba(250, 147, 28, 0.2);\n  --shadow-soft: 0 12px 26px rgba(28, 25, 17, 0.1);\n  --shadow-hover: 0 24px 44px rgba(28, 25, 17, 0.18);\n  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.7);\n  --cta-bg: linear-gradient(120deg, rgba(255, 255, 255, 0.7), rgba(250, 147, 28, 0.32));\n  --cta-border: 1px solid rgba(250, 147, 28, 0.4);\n  --cta-glow: 0 0 18px rgba(250, 147, 28, 0.28);\n  --cta-glow-hover: 0 0 22px rgba(250, 147, 28, 0.36);\n  --danger-bg: linear-gradient(120deg, rgba(255, 255, 255, 0.6), rgba(239, 68, 68, 0.3));\n  --danger-border: 1px solid rgba(239, 68, 68, 0.45);\n  --danger-glow: 0 0 16px rgba(239, 68, 68, 0.3);\n  --danger-glow-hover: 0 0 20px rgba(239, 68, 68, 0.4);\n  --radius-sm: 0.5rem;\n  --radius-md: 0.75rem;\n  --radius-lg: 1rem;\n  --radius-xl: 1.5rem;\n  --text-primary: #1C1917;\n  --text-secondary: rgba(28, 25, 17, 0.78);\n  --text-muted: rgba(28, 25, 17, 0.55);\n  --status-success: #10b981;\n  --status-warning: #eab308;\n  --status-muted: #d1d5db;\n  --status-error: #ef4444;\n  --bubble-user: #FA931C;\n  --bubble-pamela: #ffffff;\n  --bubble-recipient: #4b4bea;\n  --bubble-border: rgba(231, 171, 132, 0.3);\n}\n\n.dark {\n  --bg-gradient: linear-gradient(135deg, #171513 0%, #14110f 45%, #0f0d0b 100%);\n  --bg-glow: radial-gradient(1100px circle at 20% 10%, rgba(250, 147, 28, 0.18), transparent 60%),\n    radial-gradient(900px circle at 80% 20%, rgba(253, 139, 116, 0.16), transparent 60%),\n    radial-gradient(700px circle at 60% 80%, rgba(251, 193, 107, 0.12), transparent 55%);\n  --surface: rgba(255, 255, 255, 0.08);\n  --surface-strong: rgba(255, 255, 255, 0.16);\n  --surface-border: rgba(255, 255, 255, 0.18);\n  --surface-border-strong: rgba(255, 255, 255, 0.36);\n  --surface-highlight: rgba(255, 255, 255, 0.2);\n  --surface-liquid: linear-gradient(150deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.05));\n  --surface-liquid-strong: linear-gradient(150deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.08));\n  --liquid-shadow: 0 22px 48px rgba(0, 0, 0, 0.55);\n  --liquid-glow: 0 0 30px rgba(250, 147, 28, 0.24);\n  --shadow-soft: 0 16px 32px rgba(0, 0, 0, 0.5);\n  --shadow-hover: 0 26px 44px rgba(0, 0, 0, 0.7);\n  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.12);\n  --cta-bg: linear-gradient(120deg, rgba(255, 255, 255, 0.22), rgba(250, 147, 28, 0.34));\n  --cta-border: 1px solid rgba(250, 147, 28, 0.5);\n  --cta-glow: 0 0 16px rgba(250, 147, 28, 0.26);\n  --cta-glow-hover: 0 0 20px rgba(250, 147, 28, 0.32);\n  --danger-bg: linear-gradient(120deg, rgba(255, 255, 255, 0.18), rgba(239, 68, 68, 0.32));\n  --danger-border: 1px solid rgba(248, 113, 113, 0.55);\n  --danger-glow: 0 0 18px rgba(239, 68, 68, 0.32);\n  --danger-glow-hover: 0 0 22px rgba(239, 68, 68, 0.4);\n  --text-primary: rgba(255, 255, 255, 0.95);\n  --text-secondary: rgba(255, 255, 255, 0.72);\n  --text-muted: rgba(255, 255, 255, 0.5);\n  --bubble-pamela: rgba(255, 255, 255, 0.12);\n  --bubble-border: rgba(255, 255, 255, 0.2);\n}\n\n/* Pulse animation for status indicators */\n@keyframes pamela-pulse {\n  0%, 100% {\n    opacity: 1;\n  }\n  50% {\n    opacity: 0.5;\n  }\n}\n\n/* Call Button - matches your gradient style */\n.pamela-call-button {\n  font-family: 'Poppins', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;\n  background: var(--accent-gradient);\n  color: var(--text-primary);\n  border: var(--cta-border);\n  border-radius: var(--radius-md);\n  font-weight: 600;\n  transition: opacity 0.2s;\n  box-shadow: var(--shadow-soft), var(--cta-glow);\n  padding: 10px 20px;\n  font-size: 16px;\n  cursor: pointer;\n}\n\n.pamela-call-button:hover:not(:disabled) {\n  opacity: 0.9;\n}\n\n.pamela-call-button:disabled {\n  opacity: 0.7;\n  cursor: not-allowed;\n  background: linear-gradient(to right, #cfcfcf, #b6b6b6);\n  border: 1px solid rgba(0, 0, 0, 0.08);\n  box-shadow: none;\n}\n\n/* Call Status - matches your card style */\n.pamela-call-status {\n  font-family: 'Poppins', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;\n}\n\n/* Transcript Viewer - matches your message bubble style */\n.pamela-transcript-viewer {\n  font-family: 'Poppins', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;\n}\n\n.pamela-card {\n  background: var(--surface-liquid-strong);\n  border: 1px solid var(--surface-border-strong);\n  border-radius: var(--radius-lg);\n  box-shadow: var(--shadow-soft), var(--liquid-glow);\n}\n\n.pamela-panel {\n  background: var(--surface-liquid);\n  border: 1px solid var(--surface-border-strong);\n  border-radius: var(--radius-xl);\n  box-shadow: var(--liquid-shadow), var(--liquid-glow);\n}\n\n.pamela-chip {\n  background: var(--surface-liquid);\n  border: 1px solid var(--surface-border-strong);\n  border-radius: 999px;\n  padding: 0.25rem 0.6rem;\n  font-size: 0.75rem;\n  font-weight: 600;\n  color: var(--text-secondary);\n  box-shadow: var(--shadow-inset);\n}\n\n.pamela-transcript-container {\n  background: var(--surface);\n  border-radius: var(--radius-md);\n  padding: 16px;\n}\n\n.pamela-transcript-bubble {\n  border-radius: var(--radius-md);\n  padding: 12px 16px;\n}\n\n.pamela-transcript-bubble--pamela {\n  background: var(--bubble-pamela);\n  border: 1px solid var(--bubble-border);\n  color: var(--text-primary);\n}\n\n.pamela-transcript-bubble--user {\n  background: var(--bubble-user);\n  color: #ffffff;\n}\n\n.pamela-transcript-bubble--recipient {\n  background: var(--bubble-recipient);\n  color: #ffffff;\n}\n\n/* Dark mode support */\n@media (prefers-color-scheme: dark) {\n  .pamela-call-status {\n    color: #ffffff;\n  }\n  \n  .pamela-transcript-viewer {\n    color: #ffffff;\n  }\n}\n\n";
 styleInject(css_248z);
 
 const PamelaContext = createContext(null);
 function PamelaProvider({ config, children }) {
-    const client = new PamelaClient({
+    const client = useMemo(() => new PamelaClient({
         apiKey: config.apiKey,
         baseUrl: config.baseUrl,
-    });
+    }), [config.apiKey, config.baseUrl]);
     return (React.createElement(PamelaContext.Provider, { value: { client } }, children));
 }
 function usePamela() {
@@ -47,7 +47,7 @@ function usePamela() {
     return context;
 }
 
-function CallButton({ to, task, country, locale, instructions, end_user_id, metadata, onCallStart, onCallComplete, onError, disabled = false, className = '', children, }) {
+function CallButton({ to, task, country, locale, instructions, end_user_id, metadata, tools, webhooks, onCallStart, onCallComplete, onError, disabled = false, className = '', children, }) {
     const { client } = usePamela();
     const [loading, setLoading] = useState(false);
     const [callId, setCallId] = useState(null);
@@ -64,6 +64,8 @@ function CallButton({ to, task, country, locale, instructions, end_user_id, meta
                 instructions,
                 end_user_id,
                 metadata,
+                tools,
+                webhooks,
             });
             setCallId(call.id);
             onCallStart?.(call.id);
@@ -94,22 +96,7 @@ function CallButton({ to, task, country, locale, instructions, end_user_id, meta
             onError?.(error);
         }
     };
-    return (React.createElement("button", { onClick: handleClick, disabled: loading || disabled, className: `pamela-call-button ${className}`, style: {
-            padding: '10px 20px',
-            background: loading
-                ? 'linear-gradient(to right, #ccc, #aaa)'
-                : 'linear-gradient(to right, #FA931C, #fd8b74)',
-            color: 'white',
-            border: 'none',
-            borderRadius: '0.5rem',
-            cursor: loading || disabled ? 'not-allowed' : 'pointer',
-            fontSize: '16px',
-            fontWeight: '600',
-            fontFamily: 'Poppins, Inter, -apple-system, BlinkMacSystemFont, sans-serif',
-            transition: 'opacity 0.2s',
-            opacity: loading || disabled ? 0.7 : 1,
-            boxShadow: loading || disabled ? 'none' : '0 2px 4px rgba(250, 147, 28, 0.2)',
-        } }, loading ? 'Calling...' : children || 'Call Now'));
+    return (React.createElement("button", { onClick: handleClick, disabled: loading || disabled, className: `pamela-call-button ${className}` }, loading ? 'Calling...' : children || 'Call Now'));
 }
 
 function TranscriptViewer({ transcript, className = '' }) {
@@ -117,25 +104,28 @@ function TranscriptViewer({ transcript, className = '' }) {
         if (speaker === 'pamela' || speaker === 'agent') {
             // Pamela messages: white background with beige border
             return {
-                backgroundColor: '#ffffff',
-                border: '1px solid rgba(231, 171, 132, 0.3)',
-                color: '#1f2937',
+                backgroundColor: 'var(--bubble-pamela, #ffffff)',
+                border: '1px solid var(--bubble-border, rgba(231, 171, 132, 0.3))',
+                color: 'var(--text-primary, #1f2937)',
+                className: 'pamela-transcript-bubble pamela-transcript-bubble--pamela',
             };
         }
         else if (speaker === 'user' || speaker === 'caller') {
             // User messages: orange background
             return {
-                backgroundColor: '#FA931C',
+                backgroundColor: 'var(--bubble-user, #FA931C)',
                 border: 'none',
                 color: '#ffffff',
+                className: 'pamela-transcript-bubble pamela-transcript-bubble--user',
             };
         }
         else {
             // Call recipient: blue background
             return {
-                backgroundColor: '#4b4bea',
+                backgroundColor: 'var(--bubble-recipient, #4b4bea)',
                 border: 'none',
                 color: '#ffffff',
+                className: 'pamela-transcript-bubble pamela-transcript-bubble--recipient',
             };
         }
     };
@@ -146,21 +136,21 @@ function TranscriptViewer({ transcript, className = '' }) {
                 marginBottom: '16px',
                 fontSize: '18px',
                 fontWeight: '600',
-                color: '#1f2937',
+                color: 'var(--text-primary, #1f2937)',
             } }, "Transcript"),
-        React.createElement("div", { style: {
+        React.createElement("div", { className: "pamela-transcript-container", style: {
                 maxHeight: '400px',
                 overflowY: 'auto',
-                borderRadius: '0.5rem',
+                borderRadius: 'var(--radius-sm, 0.5rem)',
                 padding: '16px',
-                backgroundColor: '#F7F4ED',
+                background: 'var(--surface, #F7F4ED)',
             } }, transcript.map((entry, index) => {
             const style = getMessageStyle(entry.speaker);
-            return (React.createElement("div", { key: index, style: {
+            const { className: bubbleClassName, ...bubbleStyle } = style;
+            return (React.createElement("div", { key: index, className: bubbleClassName, style: {
                     marginBottom: '12px',
-                    padding: '12px 16px',
-                    ...style,
-                    borderRadius: '0.75rem',
+                    ...bubbleStyle,
+                    borderRadius: 'var(--radius-md, 0.75rem)',
                     maxWidth: '75%',
                     marginLeft: entry.speaker === 'pamela' || entry.speaker === 'agent' ? '0' : 'auto',
                     marginRight: entry.speaker === 'pamela' || entry.speaker === 'agent' ? 'auto' : '0',
@@ -168,7 +158,7 @@ function TranscriptViewer({ transcript, className = '' }) {
                 React.createElement("div", { style: {
                         fontSize: '12px',
                         fontWeight: '600',
-                        color: style.color === '#ffffff' ? 'rgba(255, 255, 255, 0.9)' : '#6b7280',
+                        color: style.color === '#ffffff' ? 'rgba(255, 255, 255, 0.9)' : 'var(--text-muted, #6b7280)',
                         marginBottom: '6px',
                         textTransform: 'capitalize',
                     } }, entry.speaker === 'pamela' || entry.speaker === 'agent'
@@ -185,7 +175,7 @@ function TranscriptViewer({ transcript, className = '' }) {
                     } }, entry.text),
                 entry.timestamp && (React.createElement("div", { style: {
                         fontSize: '11px',
-                        color: style.color === '#ffffff' ? 'rgba(255, 255, 255, 0.7)' : '#9ca3af',
+                        color: style.color === '#ffffff' ? 'rgba(255, 255, 255, 0.7)' : 'var(--text-muted, #9ca3af)',
                         marginTop: '6px',
                     } }, new Date(entry.timestamp).toLocaleTimeString()))));
         }))));
@@ -195,45 +185,63 @@ function TranscriptViewer({ transcript, className = '' }) {
 function StatusIndicator({ status }) {
     const getStatusConfig = () => {
         switch (status) {
+            case 'queued':
+            case 'initiating':
+                return {
+                    dots: [
+                        { color: 'var(--status-warning, #eab308)', pulse: true },
+                        { color: 'var(--status-muted, #d1d5db)', pulse: false },
+                        { color: 'var(--status-muted, #d1d5db)', pulse: false },
+                        { color: 'var(--status-muted, #d1d5db)', pulse: false },
+                    ],
+                    text: 'Queued...',
+                    textColor: 'var(--status-warning, #eab308)',
+                };
             case 'ringing':
                 return {
                     dots: [
-                        { color: '#10b981', pulse: true }, // green-500 (first dot)
-                        { color: '#eab308', pulse: true }, // yellow-500 (second dot)
-                        { color: '#d1d5db', pulse: false }, // gray-300 (third dot)
-                        { color: '#d1d5db', pulse: false }, // gray-300 (fourth dot)
+                        { color: 'var(--status-success, #10b981)', pulse: true },
+                        { color: 'var(--status-warning, #eab308)', pulse: true },
+                        { color: 'var(--status-muted, #d1d5db)', pulse: false },
+                        { color: 'var(--status-muted, #d1d5db)', pulse: false },
                     ],
                     text: 'Ringing...',
-                    textColor: '#eab308', // yellow-600
+                    textColor: 'var(--status-warning, #eab308)',
                 };
             case 'in_progress':
             case 'in-progress':
                 return {
                     dots: [
-                        { color: '#10b981', pulse: false }, // green-500
-                        { color: '#10b981', pulse: false },
-                        { color: '#10b981', pulse: true }, // third dot pulses
-                        { color: '#d1d5db', pulse: false }, // gray-300
+                        { color: 'var(--status-success, #10b981)', pulse: false },
+                        { color: 'var(--status-success, #10b981)', pulse: false },
+                        { color: 'var(--status-success, #10b981)', pulse: true },
+                        { color: 'var(--status-muted, #d1d5db)', pulse: false },
                     ],
                     text: 'In progress',
-                    textColor: '#10b981', // green-600
+                    textColor: 'var(--status-success, #10b981)',
                 };
             case 'completed':
                 return {
                     dots: [
-                        { color: '#10b981', pulse: false },
-                        { color: '#10b981', pulse: false },
-                        { color: '#10b981', pulse: false },
-                        { color: '#10b981', pulse: false, icon: true },
+                        { color: 'var(--status-success, #10b981)', pulse: false },
+                        { color: 'var(--status-success, #10b981)', pulse: false },
+                        { color: 'var(--status-success, #10b981)', pulse: false },
+                        { color: 'var(--status-success, #10b981)', pulse: false, icon: true },
                     ],
                     text: 'Completed',
-                    textColor: '#10b981',
+                    textColor: 'var(--status-success, #10b981)',
                 };
             case 'failed':
                 return {
                     dots: [],
                     text: 'Failed',
-                    textColor: '#ef4444', // red-500
+                    textColor: 'var(--status-error, #ef4444)',
+                };
+            case 'cancelled':
+                return {
+                    dots: [],
+                    text: 'Cancelled',
+                    textColor: 'var(--status-error, #ef4444)',
                 };
             default:
                 return {
@@ -251,7 +259,7 @@ function StatusIndicator({ status }) {
                 height: '8px',
                 borderRadius: '50%',
                 backgroundColor: dot.color,
-                animation: dot.pulse ? 'pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite' : 'none',
+                animation: dot.pulse ? 'pamela-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite' : 'none',
             } }))))))),
         React.createElement("span", { style: {
                 fontSize: '12px',
@@ -286,17 +294,17 @@ function CallStatus({ callId, pollInterval = 5000, onStatusChange, showTranscrip
     }, [callId, pollInterval, client, onStatusChange]);
     if (loading) {
         return (React.createElement("div", { className: `pamela-call-status ${className}` },
-            React.createElement("div", { style: { color: '#6b7280', fontFamily: 'Poppins, Inter, sans-serif' } }, "Loading call status...")));
+            React.createElement("div", { style: { color: 'var(--text-muted, #6b7280)', fontFamily: 'Poppins, Inter, sans-serif' } }, "Loading call status...")));
     }
     if (error) {
         return (React.createElement("div", { className: `pamela-call-status ${className}` },
-            React.createElement("div", { style: { color: '#ef4444', fontFamily: 'Poppins, Inter, sans-serif' } },
+            React.createElement("div", { style: { color: 'var(--status-error, #ef4444)', fontFamily: 'Poppins, Inter, sans-serif' } },
                 "Error: ",
                 error.message)));
     }
     if (!status) {
         return (React.createElement("div", { className: `pamela-call-status ${className}` },
-            React.createElement("div", { style: { color: '#6b7280', fontFamily: 'Poppins, Inter, sans-serif' } }, "Call not found")));
+            React.createElement("div", { style: { color: 'var(--text-muted, #6b7280)', fontFamily: 'Poppins, Inter, sans-serif' } }, "Call not found")));
     }
     return (React.createElement("div", { className: `pamela-call-status ${className}`, style: {
             fontFamily: 'Poppins, Inter, -apple-system, BlinkMacSystemFont, sans-serif',
@@ -304,34 +312,34 @@ function CallStatus({ callId, pollInterval = 5000, onStatusChange, showTranscrip
         React.createElement("div", { style: {
                 marginBottom: '16px',
                 padding: '16px',
-                backgroundColor: '#ffffff',
-                borderRadius: '0.75rem',
-                border: '1px solid rgba(231, 171, 132, 0.3)',
-                boxShadow: '0 1px 3px 0 rgba(0, 0, 0, 0.1)',
+                background: 'var(--surface-liquid-strong, #ffffff)',
+                borderRadius: 'var(--radius-md, 0.75rem)',
+                border: '1px solid var(--surface-border-strong, rgba(231, 171, 132, 0.3))',
+                boxShadow: 'var(--shadow-soft, 0 1px 3px rgba(0, 0, 0, 0.1))',
             } },
             React.createElement("div", { style: { marginBottom: '12px' } },
                 React.createElement(StatusIndicator, { status: status.status })),
-            React.createElement("div", { style: { fontSize: '14px', color: '#1f2937', lineHeight: '1.6' } },
+            React.createElement("div", { style: { fontSize: '14px', color: 'var(--text-primary, #1f2937)', lineHeight: '1.6' } },
                 React.createElement("div", { style: { marginBottom: '8px' } },
-                    React.createElement("span", { style: { fontWeight: '600', color: '#6b7280' } }, "To:"),
+                    React.createElement("span", { style: { fontWeight: '600', color: 'var(--text-secondary, #6b7280)' } }, "To:"),
                     ' ',
-                    React.createElement("span", { style: { color: '#1f2937' } }, status.to)),
+                    React.createElement("span", { style: { color: 'var(--text-primary, #1f2937)' } }, status.to)),
                 React.createElement("div", { style: { marginBottom: '8px' } },
-                    React.createElement("span", { style: { fontWeight: '600', color: '#6b7280' } }, "From:"),
+                    React.createElement("span", { style: { fontWeight: '600', color: 'var(--text-secondary, #6b7280)' } }, "From:"),
                     ' ',
-                    React.createElement("span", { style: { color: '#1f2937' } }, status.from_)),
+                    React.createElement("span", { style: { color: 'var(--text-primary, #1f2937)' } }, status.from_)),
                 status.duration_seconds && (React.createElement("div", { style: { marginBottom: '8px' } },
-                    React.createElement("span", { style: { fontWeight: '600', color: '#6b7280' } }, "Duration:"),
+                    React.createElement("span", { style: { fontWeight: '600', color: 'var(--text-secondary, #6b7280)' } }, "Duration:"),
                     ' ',
-                    React.createElement("span", { style: { color: '#1f2937' } },
+                    React.createElement("span", { style: { color: 'var(--text-primary, #1f2937)' } },
                         status.duration_seconds,
                         "s")))),
             status.summary && (React.createElement("div", { style: {
                     marginTop: '16px',
                     padding: '16px',
-                    background: 'linear-gradient(to right, rgba(250, 147, 28, 0.1), rgba(253, 139, 116, 0.1))',
-                    border: '1px solid rgba(250, 147, 28, 0.3)',
-                    borderRadius: '0.75rem',
+                    background: 'var(--cta-bg, linear-gradient(to right, rgba(250, 147, 28, 0.1), rgba(253, 139, 116, 0.1)))',
+                    border: 'var(--cta-border, 1px solid rgba(250, 147, 28, 0.3))',
+                    borderRadius: 'var(--radius-md, 0.75rem)',
                 } },
                 React.createElement("div", { style: {
                         display: 'flex',
@@ -339,21 +347,11 @@ function CallStatus({ callId, pollInterval = 5000, onStatusChange, showTranscrip
                         gap: '8px',
                         marginBottom: '8px',
                     } },
-                    React.createElement("svg", { style: { width: '20px', height: '20px', color: '#FA931C' }, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24" },
+                    React.createElement("svg", { style: { width: '20px', height: '20px', color: 'var(--accent, #FA931C)' }, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24" },
                         React.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" })),
-                    React.createElement("h4", { style: { fontWeight: '600', color: '#1f2937', fontSize: '14px' } }, "Call Summary")),
-                React.createElement("p", { style: { fontSize: '14px', color: '#1f2937', lineHeight: '1.6' } }, status.summary)))),
-        showTranscript && status.transcript && status.transcript.length > 0 && (React.createElement(TranscriptViewer, { transcript: status.transcript })),
-        React.createElement("style", null, `
-        @keyframes pulse {
-          0%, 100% {
-            opacity: 1;
-          }
-          50% {
-            opacity: 0.5;
-          }
-        }
-      `)));
+                    React.createElement("h4", { style: { fontWeight: '600', color: 'var(--text-primary, #1f2937)', fontSize: '14px' } }, "Call Summary")),
+                React.createElement("p", { style: { fontSize: '14px', color: 'var(--text-primary, #1f2937)', lineHeight: '1.6' } }, status.summary)))),
+        showTranscript && status.transcript && status.transcript.length > 0 && (React.createElement(TranscriptViewer, { transcript: status.transcript }))));
 }
 
 function CallHistory({ limit = 10, onCallSelect, className = '', }) {
@@ -361,19 +359,37 @@ function CallHistory({ limit = 10, onCallSelect, className = '', }) {
     const [calls, setCalls] = useState([]);
     const [loading, setLoading] = useState(true);
     const [error, setError] = useState(null);
-    // Note: This requires a list endpoint in the API
-    // For now, this is a placeholder that shows the structure
     useEffect(() => {
-        // TODO: Implement when /api/b2b/v1/calls list endpoint is available
-        setLoading(false);
-    }, [client]);
+        let isMounted = true;
+        const fetchCalls = async () => {
+            try {
+                const response = await client.listCalls({ limit });
+                if (!isMounted) {
+                    return;
+                }
+                setCalls(response.items || []);
+                setLoading(false);
+            }
+            catch (err) {
+                if (!isMounted) {
+                    return;
+                }
+                setError(err);
+                setLoading(false);
+            }
+        };
+        fetchCalls();
+        return () => {
+            isMounted = false;
+        };
+    }, [client, limit]);
     if (loading) {
         return (React.createElement("div", { className: `pamela-call-history ${className}` },
-            React.createElement("div", { style: { color: '#6b7280', fontFamily: 'Poppins, Inter, sans-serif' } }, "Loading call history...")));
+            React.createElement("div", { style: { color: 'var(--text-muted, #6b7280)', fontFamily: 'Poppins, Inter, sans-serif' } }, "Loading call history...")));
     }
     if (error) {
         return (React.createElement("div", { className: `pamela-call-history ${className}` },
-            React.createElement("div", { style: { color: '#ef4444', fontFamily: 'Poppins, Inter, sans-serif' } },
+            React.createElement("div", { style: { color: 'var(--status-error, #ef4444)', fontFamily: 'Poppins, Inter, sans-serif' } },
                 "Error: ",
                 error.message)));
     }
@@ -384,30 +400,30 @@ function CallHistory({ limit = 10, onCallSelect, className = '', }) {
                 marginBottom: '16px',
                 fontSize: '18px',
                 fontWeight: '600',
-                color: '#1f2937',
+                color: 'var(--text-primary, #1f2937)',
             } }, "Call History"),
-        calls.length === 0 ? (React.createElement("div", { style: { color: '#6b7280', fontSize: '14px' } }, "No calls yet")) : (React.createElement("div", null, calls.map((call) => (React.createElement("div", { key: call.id, onClick: () => onCallSelect?.(call.id), style: {
+        calls.length === 0 ? (React.createElement("div", { style: { color: 'var(--text-muted, #6b7280)', fontSize: '14px' } }, "No calls yet")) : (React.createElement("div", null, calls.map((call) => (React.createElement("div", { key: call.id, onClick: () => onCallSelect?.(call.id), style: {
                 padding: '12px',
                 marginBottom: '8px',
-                border: '1px solid rgba(231, 171, 132, 0.3)',
-                borderRadius: '0.5rem',
+                border: '1px solid var(--surface-border-strong, rgba(231, 171, 132, 0.3))',
+                borderRadius: 'var(--radius-sm, 0.5rem)',
                 cursor: onCallSelect ? 'pointer' : 'default',
-                backgroundColor: '#ffffff',
+                background: 'var(--surface-liquid-strong, #ffffff)',
                 transition: 'background-color 0.2s',
                 ...(onCallSelect && {
                     ':hover': {
-                        backgroundColor: '#F7F4ED',
+                        backgroundColor: 'var(--surface, #F7F4ED)',
                     },
                 }),
             }, onMouseEnter: (e) => {
                 if (onCallSelect) {
-                    e.currentTarget.style.backgroundColor = '#F7F4ED';
+                    e.currentTarget.style.backgroundColor = 'var(--surface, #F7F4ED)';
                 }
             }, onMouseLeave: (e) => {
-                e.currentTarget.style.backgroundColor = '#ffffff';
+                e.currentTarget.style.backgroundColor = 'var(--surface-liquid-strong, #ffffff)';
             } },
-            React.createElement("div", { style: { fontWeight: '600', color: '#1f2937', marginBottom: '4px' } }, call.to),
-            React.createElement("div", { style: { fontSize: '14px', color: '#6b7280' } },
+            React.createElement("div", { style: { fontWeight: '600', color: 'var(--text-primary, #1f2937)', marginBottom: '4px' } }, call.to),
+            React.createElement("div", { style: { fontSize: '14px', color: 'var(--text-secondary, #6b7280)' } },
                 call.status,
                 " \u2022 ",
                 new Date(call.created_at).toLocaleString()))))))));