@thisispamela/react 1.0.0 → 1.0.2

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);
@@ -73,6 +73,10 @@ A button component that initiates a call when clicked.
   locale="en-US"
   instructions="Be professional and concise"
   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)}
@@ -90,16 +94,20 @@ A button component that initiates a call when clicked.
 - `locale`: Locale string (optional, e.g., "en-US")
 - `instructions`: Additional instructions (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 +115,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 +126,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 +148,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).
@@ -168,7 +220,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 +272,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, 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,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,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,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,qBAqHjB"}

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

@@ -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;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;AA6H1C,wBAAgB,UAAU,CAAC,EACzB,MAAM,EACN,YAAmB,EACnB,cAAc,EACd,cAAqB,EACrB,WAAkB,EAClB,OAAe,EACf,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

@@ -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,qBA8GrF"}
+{"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

@@ -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,9 +13,15 @@ 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;
+    variant?: 'primary' | 'secondary' | 'danger';
+    size?: 'sm' | 'md' | 'lg';
+    pollInterval?: number;
+    pollTimeout?: number;
     disabled?: boolean;
     className?: string;
     children?: ReactNode;
@@ -25,6 +31,8 @@ interface CallStatusProps {
     pollInterval?: number;
     onStatusChange?: (status: CallStatus$1) => void;
     showTranscript?: boolean;
+    showSummary?: boolean;
+    compact?: boolean;
     className?: string;
 }
 interface TranscriptViewerProps {
@@ -33,6 +41,8 @@ interface TranscriptViewerProps {
         text: string;
         timestamp: string;
     }>;
+    maxHeight?: number | string;
+    autoScroll?: boolean;
     className?: string;
 }
 interface CallHistoryProps {
@@ -40,6 +50,11 @@ interface CallHistoryProps {
     onCallSelect?: (callId: string) => void;
     className?: string;
 }
+interface VoiceOrbProps {
+    isActive?: boolean;
+    size?: 'small' | 'medium' | 'large';
+    className?: string;
+}
 
 interface PamelaContextValue {
     client: PamelaClient;
@@ -51,12 +66,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, 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, 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"}