@thisispamela/react 1.0.0

package/README.md

@@ -0,0 +1,293 @@
+# @pamela/react
+
+React component library for easy integration of Pamela Voice API into your React applications.
+
+## Installation
+
+```bash
+npm install @pamela/react @pamela/sdk
+```
+
+## Quick Start
+
+### 1. Wrap your app with PamelaProvider
+
+```tsx
+import { PamelaProvider } from '@pamela/react';
+
+function App() {
+  return (
+    <PamelaProvider
+      config={{
+        apiKey: 'pk_live_your_api_key_here',
+        baseUrl: 'https://api.thisispamela.com', // Optional
+      }}
+    >
+      <YourApp />
+    </PamelaProvider>
+  );
+}
+```
+
+### 2. Use the components
+
+```tsx
+import { CallButton, CallStatus } from '@pamela/react';
+
+function MyComponent() {
+  const [callId, setCallId] = useState<string | null>(null);
+
+  return (
+    <div>
+      <CallButton
+        to="+1234567890"
+        task="Schedule a meeting for next week"
+        onCallStart={(id) => setCallId(id)}
+        onCallComplete={(call) => console.log('Call completed:', call)}
+      >
+        Make Call
+      </CallButton>
+
+      {callId && (
+        <CallStatus
+          callId={callId}
+          showTranscript={true}
+        />
+      )}
+    </div>
+  );
+}
+```
+
+## Components
+
+### CallButton
+
+A button component that initiates a call when clicked.
+
+```tsx
+<CallButton
+  to="+1234567890"
+  task="Schedule a meeting"
+  country="US"
+  locale="en-US"
+  instructions="Be professional and concise"
+  metadata={{ customer_id: "12345" }}
+  onCallStart={(callId) => console.log('Call started:', callId)}
+  onCallComplete={(call) => console.log('Call completed:', call)}
+  onError={(error) => console.error('Error:', error)}
+  disabled={false}
+  className="my-custom-class"
+>
+  Make Call
+</CallButton>
+```
+
+**Props:**
+- `to` (required): Phone number in E.164 format
+- `task` (required): Task description for the call
+- `country`: ISO country code (optional)
+- `locale`: Locale string (optional, e.g., "en-US")
+- `instructions`: Additional instructions (optional)
+- `metadata`: Custom metadata object (optional)
+- `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")
+
+### CallStatus
+
+Displays the current status of a call with optional transcript.
+
+```tsx
+<CallStatus
+  callId="call_123"
+  pollInterval={5000}
+  onStatusChange={(status) => console.log('Status:', status)}
+  showTranscript={true}
+  className="my-custom-class"
+/>
+```
+
+**Props:**
+- `callId` (required): Call ID to monitor
+- `pollInterval`: Polling interval in milliseconds (default: 5000)
+- `onStatusChange`: Callback when status changes (optional)
+- `showTranscript`: Show transcript (default: true)
+- `className`: Custom CSS class (optional)
+
+### TranscriptViewer
+
+Displays a call transcript in a readable format.
+
+```tsx
+<TranscriptViewer
+  transcript={[
+    {
+      speaker: "pamela",
+      text: "Hello, this is Pamela...",
+      timestamp: "2024-01-01T00:00:02Z"
+    },
+    {
+      speaker: "user",
+      text: "Hi Pamela!",
+      timestamp: "2024-01-01T00:00:05Z"
+    }
+  ]}
+  className="my-custom-class"
+/>
+```
+
+**Props:**
+- `transcript` (required): Array of transcript entries
+- `className`: Custom CSS class (optional)
+
+### CallHistory
+
+Displays a list of previous calls (requires API endpoint).
+
+```tsx
+<CallHistory
+  limit={10}
+  onCallSelect={(callId) => console.log('Selected:', callId)}
+  className="my-custom-class"
+/>
+```
+
+**Props:**
+- `limit`: Maximum number of calls to display (default: 10)
+- `onCallSelect`: Callback when a call is selected (optional)
+- `className`: Custom CSS class (optional)
+
+## Hooks
+
+### usePamela
+
+Access the Pamela client directly for custom integrations.
+
+```tsx
+import { usePamela } from '@pamela/react';
+
+function MyComponent() {
+  const { client } = usePamela();
+
+  const handleCustomCall = async () => {
+    const call = await client.createCall({
+      to: '+1234567890',
+      task: 'Custom task',
+    });
+    console.log('Call created:', call);
+  };
+
+  return <button onClick={handleCustomCall}>Custom Call</button>;
+}
+```
+
+## Styling
+
+Components use **Pamela's design system** by default, matching the B2C UI:
+
+- **Colors**: Orange gradient buttons (#FA931C → #fd8b74), beige borders (#e7ab84)
+- **3-Color Call Status**: Yellow (ringing), Green (in progress), Green with checkmark (completed)
+- **Message Bubbles**: Orange (user), White with beige border (Pamela), Blue (call recipient)
+- **Fonts**: Poppins, Inter
+- **Dark Mode**: Automatic support
+
+You can override styles with CSS classes:
+
+```css
+.pamela-call-button {
+  /* Override button styles */
+  background: linear-gradient(to right, #your-color, #your-color);
+}
+
+.pamela-call-status {
+  /* Override status container */
+}
+
+.pamela-transcript-viewer {
+  /* Override transcript container */
+}
+```
+
+Or use the `className` prop on any component to add your own classes.
+
+## Examples
+
+### Complete Integration Example
+
+```tsx
+import React, { useState } from 'react';
+import { PamelaProvider, CallButton, CallStatus, TranscriptViewer } from '@pamela/react';
+
+function App() {
+  return (
+    <PamelaProvider
+      config={{
+        apiKey: process.env.REACT_APP_PAMELA_API_KEY!,
+      }}
+    >
+      <CallExample />
+    </PamelaProvider>
+  );
+}
+
+function CallExample() {
+  const [callId, setCallId] = useState<string | null>(null);
+  const [callData, setCallData] = useState<any>(null);
+
+  return (
+    <div>
+      <h1>Make a Call</h1>
+      
+      <CallButton
+        to="+1234567890"
+        task="Schedule a meeting for next week"
+        onCallStart={(id) => {
+          setCallId(id);
+          console.log('Call started:', id);
+        }}
+        onCallComplete={(call) => {
+          setCallData(call);
+          console.log('Call completed:', call);
+        }}
+        onError={(error) => {
+          console.error('Call error:', error);
+        }}
+      >
+        Call Now
+      </CallButton>
+
+      {callId && (
+        <div style={{ marginTop: '24px' }}>
+          <CallStatus
+            callId={callId}
+            onStatusChange={(status) => {
+              if (status.status === 'completed') {
+                setCallData(status);
+              }
+            }}
+          />
+        </div>
+      )}
+
+      {callData && callData.transcript && (
+        <div style={{ marginTop: '24px' }}>
+          <TranscriptViewer transcript={callData.transcript} />
+        </div>
+      )}
+    </div>
+  );
+}
+```
+
+## TypeScript Support
+
+Full TypeScript support is included. All components and hooks are fully typed.
+
+## License
+
+MIT
+

package/dist/CallButton.d.ts

@@ -0,0 +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;
+//# sourceMappingURL=CallButton.d.ts.map

package/dist/CallButton.d.ts.map

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

package/dist/CallHistory.d.ts

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

package/dist/CallHistory.d.ts.map

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

package/dist/CallStatus.d.ts

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

package/dist/CallStatus.d.ts.map

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

package/dist/PamelaProvider.d.ts

@@ -0,0 +1,14 @@
+import React, { ReactNode } from 'react';
+import { PamelaClient } from '@thisispamela/sdk';
+import { PamelaConfig } from './types';
+interface PamelaContextValue {
+    client: PamelaClient;
+}
+export interface PamelaProviderProps {
+    config: PamelaConfig;
+    children: ReactNode;
+}
+export declare function PamelaProvider({ config, children }: PamelaProviderProps): React.JSX.Element;
+export declare function usePamela(): PamelaContextValue;
+export {};
+//# sourceMappingURL=PamelaProvider.d.ts.map

package/dist/PamelaProvider.d.ts.map

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

package/dist/TranscriptViewer.d.ts

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

package/dist/TranscriptViewer.d.ts.map

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

package/dist/index.d.ts

@@ -0,0 +1,62 @@
+import React, { ReactNode } from 'react';
+import { CallStatus as CallStatus$1, PamelaClient } from '@thisispamela/sdk';
+
+interface PamelaConfig {
+    apiKey: string;
+    baseUrl?: string;
+}
+interface CallButtonProps {
+    to: string;
+    task: string;
+    country?: string;
+    locale?: string;
+    instructions?: string;
+    end_user_id?: string;
+    metadata?: Record<string, any>;
+    onCallStart?: (callId: string) => void;
+    onCallComplete?: (call: CallStatus$1) => void;
+    onError?: (error: Error) => void;
+    disabled?: boolean;
+    className?: string;
+    children?: ReactNode;
+}
+interface CallStatusProps {
+    callId: string;
+    pollInterval?: number;
+    onStatusChange?: (status: CallStatus$1) => void;
+    showTranscript?: boolean;
+    className?: string;
+}
+interface TranscriptViewerProps {
+    transcript: Array<{
+        speaker: string;
+        text: string;
+        timestamp: string;
+    }>;
+    className?: string;
+}
+interface CallHistoryProps {
+    limit?: number;
+    onCallSelect?: (callId: string) => void;
+    className?: string;
+}
+
+interface PamelaContextValue {
+    client: PamelaClient;
+}
+interface PamelaProviderProps {
+    config: PamelaConfig;
+    children: ReactNode;
+}
+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 CallStatus({ callId, pollInterval, onStatusChange, showTranscript, className, }: CallStatusProps): React.JSX.Element;
+
+declare function TranscriptViewer({ transcript, 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 };

package/dist/index.d.ts.map

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