npm package: @jaswantsoni1812/echo-voicebot
Description: React TypeScript library for WebSocket-based voice interactions
Author: Jaswant Soni jaswantsoni1812@gmail.com
Latest version: 1.1.1

# Echo Voicebot Library

A React TypeScript library for WebSocket-based voice interactions with real-time audio streaming and transcription support.

## Installation

```bash
npm install echo-voicebot
```

## Quick Start

### Basic Usage with Component

```tsx
import React from 'react';
import { VoicebotWidget, VoicebotConfig } from 'echo-voicebot';

const App = () => {
  const config: VoicebotConfig = {
    userId: 'user123',
    assistantId: 'assistant456',
    flowId: 'flow789',
    autoStream: true,
    language: 'en-US'
  };

  return (
    <div>
      <h1>My Voice App</h1>
      <VoicebotWidget 
        config={config}
        showTranscripts={true}
        showControls={true}
      />
    </div>
  );
};

export default App;
```

### Advanced Usage with Hook

```tsx
import React from 'react';
import { useVoicebot, VoicebotConfig } from 'echo-voicebot';

const CustomVoiceComponent = () => {
  const config: VoicebotConfig = {
    userId: 'user123',
    assistantId: 'assistant456',
    flowId: 'flow789'
  };

  const { 
    status, 
    isStreaming, 
    transcripts, 
    connectionUrls,
    connect, 
    disconnect, 
    startStreaming, 
    stopStreaming 
  } = useVoicebot(config, {
    onTranscript: (message) => console.log('New transcript:', message),
    onStatusChange: (status) => console.log('Status changed:', status),
    onError: (error) => console.error('Error:', error)
  });

  return (
    <div>
      <button onClick={connect}>Connect</button>
      <button onClick={startStreaming} disabled={status !== 'connected'}>
        Start Recording
      </button>
      <p>Status: {status}</p>
      <div>
        {transcripts.map((t, i) => (
          <p key={i}>{t.speaker}: {t.text}</p>
        ))}
      </div>
    </div>
  );
};
```

## Configuration

### VoicebotConfig

| Property | Type | Required | Description |
|----------|------|----------|-------------|

| `userId` | string | ✅ | User identifier |
| `assistantId` | string | ✅ | Assistant identifier |
| `flowId` | string | ✅ | Flow identifier |
| `callSid` | string | ❌ | Call session ID |
| `language` | string | ❌ | Language code (default: 'en-US') |
| `interruptions` | boolean | ❌ | Enable interruptions |
| `prompt` | string | ❌ | Assistant prompt |
| `autoStream` | boolean | ❌ | Auto-start streaming on connect |

### Callbacks

```tsx
const callbacks: VoicebotCallbacks = {
  onTranscript: (message) => {
    // Handle new transcript message
  },
  onStatusChange: (status) => {
    // Handle connection status changes
  },
  onError: (error) => {
    // Handle errors
  },
  onCallEnd: () => {
    // Handle call end
  }
};
```

## React Native Support

For React Native, you'll need to install additional dependencies:

```bash
npm install react-native-webrtc
```

Then use the library the same way:

```tsx
import { VoicebotWidget } from 'echo-voicebot';

// Same usage as React
```

## Flutter Integration

For Flutter apps using webview_flutter:

```dart
// Add to pubspec.yaml
dependencies:
  webview_flutter: ^4.0.0

// Create a WebView that loads your React component
WebView(
  initialUrl: 'your-react-app-url-with-voicebot-widget',
  javascriptMode: JavascriptMode.unrestricted,
)
```

## API Reference

### Hook: useVoicebot

Returns an object with:

- `status`: Current connection status
- `isStreaming`: Whether audio streaming is active
- `transcripts`: Array of transcript messages
- `connectionUrls`: WebSocket URLs used for connection
- `connect()`: Connect to WebSocket
- `disconnect()`: Disconnect from WebSocket
- `startStreaming()`: Start audio recording
- `stopStreaming()`: Stop audio recording

### Component: VoicebotWidget

Props:
- `config`: VoicebotConfig object
- `callbacks?`: Optional callbacks
- `className?`: CSS class name
- `showTranscripts?`: Show transcript panel (default: true)
- `showControls?`: Show control buttons (default: true)

## License

MIT