Echo Voicebot Library

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

Installation

npm install echo-voicebot

Quick Start

Basic Usage with Component

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

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

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:

npm install react-native-webrtc

Then use the library the same way:

import { VoicebotWidget } from 'echo-voicebot';

// Same usage as React

Flutter Integration

For Flutter apps using webview_flutter:

// 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#� �e�c�h�o�-�v�o�i�c�e�b�o�t� � �