@thisispamela/react 1.0.1 → 1.0.3

package/README.md

@@ -42,6 +42,9 @@ function MyComponent() {
       <CallButton
         to="+1234567890"
         task="Schedule a meeting for next week"
+        voice="female"
+        agent_name="Pamela"
+        caller_name="John from Acme"
         onCallStart={(id) => setCallId(id)}
         onCallComplete={(call) => console.log('Call completed:', call)}
       >
@@ -72,7 +75,14 @@ A button component that initiates a call when clicked.
   country="US"
   locale="en-US"
   instructions="Be professional and concise"
+  voice="female"
+  agent_name="Pamela"
+  caller_name="John from Acme"
   metadata={{ customer_id: "12345" }}
+  variant="primary"
+  size="md"
+  pollInterval={2000}
+  pollTimeout={300000}
   onCallStart={(callId) => console.log('Call started:', callId)}
   onCallComplete={(call) => console.log('Call completed:', call)}
   onError={(error) => console.error('Error:', error)}
@@ -89,17 +99,24 @@ A button component that initiates a call when clicked.
 - `country`: ISO country code (optional)
 - `locale`: Locale string (optional, e.g., "en-US")
 - `instructions`: Additional instructions (optional)
+- `voice`: Voice preference `"male" | "female" | "auto"` (optional)
+- `agent_name`: Agent name override (optional)
+- `caller_name`: Name of who the agent is calling on behalf of (optional)
 - `metadata`: Custom metadata object (optional)
+- `variant`: Button style - `"primary"` | `"secondary"` | `"danger"` (default: `"primary"`)
+- `size`: Button size - `"sm"` | `"md"` | `"lg"` (default: `"md"`)
+- `pollInterval`: Status polling interval in ms (default: 2000)
+- `pollTimeout`: Maximum polling duration in ms (default: 300000 = 5 min)
 - `onCallStart`: Callback when call starts (optional)
 - `onCallComplete`: Callback when call completes (optional)
 - `onError`: Error callback (optional)
 - `disabled`: Disable button (optional)
 - `className`: Custom CSS class (optional)
-- `children`: Button content (optional, defaults to "Make Call")
+- `children`: Button content (optional, defaults to "Call Now")
 
 ### CallStatus
 
-Displays the current status of a call with optional transcript.
+Displays the current status of a call with optional transcript and summary.
 
 ```tsx
 <CallStatus
@@ -107,6 +124,8 @@ Displays the current status of a call with optional transcript.
   pollInterval={5000}
   onStatusChange={(status) => console.log('Status:', status)}
   showTranscript={true}
+  showSummary={true}
+  compact={false}
   className="my-custom-class"
 />
 ```
@@ -116,11 +135,13 @@ Displays the current status of a call with optional transcript.
 - `pollInterval`: Polling interval in milliseconds (default: 5000)
 - `onStatusChange`: Callback when status changes (optional)
 - `showTranscript`: Show transcript (default: true)
+- `showSummary`: Show call summary when available (default: true)
+- `compact`: Use compact layout (default: false)
 - `className`: Custom CSS class (optional)
 
 ### TranscriptViewer
 
-Displays a call transcript in a readable format.
+Displays a call transcript in a readable format with auto-scroll support.
 
 ```tsx
 <TranscriptViewer
@@ -136,14 +157,54 @@ Displays a call transcript in a readable format.
       timestamp: "2024-01-01T00:00:05Z"
     }
   ]}
+  maxHeight={400}
+  autoScroll={true}
   className="my-custom-class"
 />
 ```
 
 **Props:**
 - `transcript` (required): Array of transcript entries
+- `maxHeight`: Maximum container height (default: 400, accepts number or CSS string)
+- `autoScroll`: Auto-scroll to latest message (default: true)
 - `className`: Custom CSS class (optional)
 
+### VoiceOrb
+
+Animated voice indicator orb with idle and active states. Matches the Pamela app signature visual.
+
+```tsx
+import { VoiceOrb } from '@thisispamela/react';
+
+// Idle state (breathing animation)
+<VoiceOrb isActive={false} size="large" />
+
+// Active state (pulsing animation)
+<VoiceOrb isActive={true} size="medium" />
+```
+
+**Props:**
+- `isActive`: Whether the orb is in active state (default: false)
+- `size`: Orb size - `"small"` | `"medium"` | `"large"` (default: `"large"`)
+- `className`: Custom CSS class (optional)
+
+**Size CSS Variables:**
+You can customize sizes via CSS variables:
+```css
+:root {
+  --pamela-orb-size-small: 96px;
+  --pamela-orb-size-medium: 128px;
+  --pamela-orb-size-large: 192px;
+}
+```
+
+**Features:**
+- Multi-layer breathing effect (idle mode)
+- Pulsing animation with ripples (active mode)
+- Floating/levitation effect
+- Gradient rotation
+- Shimmer highlights
+
 ### CallHistory
 
 Displays a list of previous calls (requires API endpoint).

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, tools, webhooks, onCallStart, onCallComplete, onError, disabled, className, children, }: CallButtonProps): React.JSX.Element;
+export declare function CallButton({ to, task, country, locale, instructions, voice, agent_name, caller_name, end_user_id, metadata, tools, webhooks, onCallStart, onCallComplete, onError, variant, size, pollInterval, pollTimeout, 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,KAAK,EACL,QAAQ,EACR,WAAW,EACX,cAAc,EACd,OAAO,EACP,QAAgB,EAChB,SAAc,EACd,QAAQ,GACT,EAAE,eAAe,qBA6DjB"}
+{"version":3,"file":"CallButton.d.ts","sourceRoot":"","sources":["../src/CallButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAE3D,OAAO,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAE1C,wBAAgB,UAAU,CAAC,EACzB,EAAE,EACF,IAAI,EACJ,OAAO,EACP,MAAM,EACN,YAAY,EACZ,KAAK,EACL,UAAU,EACV,WAAW,EACX,WAAW,EACX,QAAQ,EACR,KAAK,EACL,QAAQ,EACR,WAAW,EACX,cAAc,EACd,OAAO,EACP,OAAmB,EACnB,IAAW,EACX,YAAmB,EACnB,WAA2B,EAC3B,QAAgB,EAChB,SAAc,EACd,QAAQ,GACT,EAAE,eAAe,qBAwHjB"}

package/dist/CallStatus.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 import { CallStatusProps } from './types';
-export declare function CallStatus({ callId, pollInterval, onStatusChange, showTranscript, className, }: CallStatusProps): React.JSX.Element;
+export declare function CallStatus({ callId, pollInterval, onStatusChange, showTranscript, showSummary, compact, className, }: CallStatusProps): React.JSX.Element;
 //# sourceMappingURL=CallStatus.d.ts.map

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;AA4H1C,wBAAgB,UAAU,CAAC,EACzB,MAAM,EACN,YAAmB,EACnB,cAAc,EACd,cAAqB,EACrB,SAAc,GACf,EAAE,eAAe,qBA2IjB"}
+{"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;AA6H1C,wBAAgB,UAAU,CAAC,EACzB,MAAM,EACN,YAAmB,EACnB,cAAc,EACd,cAAqB,EACrB,WAAkB,EAClB,OAAe,EACf,SAAc,GACf,EAAE,eAAe,qBA2IjB"}

package/dist/TranscriptViewer.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 import { TranscriptViewerProps } from './types';
-export declare function TranscriptViewer({ transcript, className }: TranscriptViewerProps): React.JSX.Element;
+export declare function TranscriptViewer({ transcript, maxHeight, autoScroll, className, }: TranscriptViewerProps): React.JSX.Element;
 //# sourceMappingURL=TranscriptViewer.d.ts.map

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,qBAmHrF"}
+{"version":3,"file":"TranscriptViewer.d.ts","sourceRoot":"","sources":["../src/TranscriptViewer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAC;AACjD,OAAO,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAEhD,wBAAgB,gBAAgB,CAAC,EAC/B,UAAU,EACV,SAAe,EACf,UAAiB,EACjB,SAAc,GACf,EAAE,qBAAqB,qBA2HvB"}

package/dist/VoiceOrb.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { VoiceOrbProps } from './types';
+export declare function VoiceOrb({ isActive, size, className }: VoiceOrbProps): React.JSX.Element;
+//# sourceMappingURL=VoiceOrb.d.ts.map

package/dist/VoiceOrb.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"VoiceOrb.d.ts","sourceRoot":"","sources":["../src/VoiceOrb.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AACnD,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAQxC,wBAAgB,QAAQ,CAAC,EAAE,QAAgB,EAAE,IAAc,EAAE,SAAc,EAAE,EAAE,aAAa,qBA6Q3F"}

package/dist/index.d.ts

@@ -11,6 +11,9 @@ interface CallButtonProps {
     country?: string;
     locale?: string;
     instructions?: string;
+    voice?: CreateCallRequest['voice'];
+    agent_name?: string;
+    caller_name?: string;
     end_user_id?: string;
     metadata?: Record<string, any>;
     tools?: CreateCallRequest["tools"];
@@ -18,6 +21,10 @@ interface CallButtonProps {
     onCallStart?: (callId: string) => void;
     onCallComplete?: (call: CallStatus$1) => void;
     onError?: (error: Error) => void;
+    variant?: 'primary' | 'secondary' | 'danger';
+    size?: 'sm' | 'md' | 'lg';
+    pollInterval?: number;
+    pollTimeout?: number;
     disabled?: boolean;
     className?: string;
     children?: ReactNode;
@@ -27,6 +34,8 @@ interface CallStatusProps {
     pollInterval?: number;
     onStatusChange?: (status: CallStatus$1) => void;
     showTranscript?: boolean;
+    showSummary?: boolean;
+    compact?: boolean;
     className?: string;
 }
 interface TranscriptViewerProps {
@@ -35,6 +44,8 @@ interface TranscriptViewerProps {
         text: string;
         timestamp: string;
     }>;
+    maxHeight?: number | string;
+    autoScroll?: boolean;
     className?: string;
 }
 interface CallHistoryProps {
@@ -42,6 +53,11 @@ interface CallHistoryProps {
     onCallSelect?: (callId: string) => void;
     className?: string;
 }
+interface VoiceOrbProps {
+    isActive?: boolean;
+    size?: 'small' | 'medium' | 'large';
+    className?: string;
+}
 
 interface PamelaContextValue {
     client: PamelaClient;
@@ -53,12 +69,14 @@ 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, tools, webhooks, onCallStart, onCallComplete, onError, disabled, className, children, }: CallButtonProps): React.JSX.Element;
+declare function CallButton({ to, task, country, locale, instructions, voice, agent_name, caller_name, end_user_id, metadata, tools, webhooks, onCallStart, onCallComplete, onError, variant, size, pollInterval, pollTimeout, disabled, className, children, }: CallButtonProps): React.JSX.Element;
 
-declare function CallStatus({ callId, pollInterval, onStatusChange, showTranscript, className, }: CallStatusProps): React.JSX.Element;
+declare function CallStatus({ callId, pollInterval, onStatusChange, showTranscript, showSummary, compact, className, }: CallStatusProps): React.JSX.Element;
 
-declare function TranscriptViewer({ transcript, className }: TranscriptViewerProps): React.JSX.Element;
+declare function TranscriptViewer({ transcript, maxHeight, autoScroll, className, }: TranscriptViewerProps): React.JSX.Element;
 
 declare function CallHistory({ limit, onCallSelect, className, }: CallHistoryProps): React.JSX.Element;
 
-export { CallButton, CallButtonProps, CallHistory, CallHistoryProps, CallStatus, CallStatusProps, PamelaConfig, PamelaProvider, TranscriptViewer, TranscriptViewerProps, usePamela };
+declare function VoiceOrb({ isActive, size, className }: VoiceOrbProps): React.JSX.Element;
+
+export { CallButton, CallButtonProps, CallHistory, CallHistoryProps, CallStatus, CallStatusProps, PamelaConfig, PamelaProvider, TranscriptViewer, TranscriptViewerProps, VoiceOrb, VoiceOrbProps, usePamela };

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,OAAO,cAAc,CAAC;AAEtB,OAAO,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAC7D,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAE5C,YAAY,EACV,YAAY,EACZ,eAAe,EACf,eAAe,EACf,qBAAqB,EACrB,gBAAgB,GACjB,MAAM,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,OAAO,cAAc,CAAC;AAEtB,OAAO,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAC7D,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAEtC,YAAY,EACV,YAAY,EACZ,eAAe,EACf,eAAe,EACf,qBAAqB,EACrB,gBAAgB,EAChB,aAAa,GACd,MAAM,SAAS,CAAC"}