@sonex/sdk-browser

React chatbot widget component for Sonex SDK - customizable, embeddable AI chat interface.

Features

- 🎨 Fully customizable UI with 6+ predefined themes
- 🎤 Voice input support with real-time transcription
- 💬 Real-time chat messaging with streaming responses
- 📱 Responsive design (mobile & desktop)
- 🔧 Easy configuration with TypeScript support
- 🎯 Custom template system for rich message rendering
- 🔐 Flexible token management (providers, storage adapters)

Installation

``bash
npm install @sonex/sdk-browser
`

> Note: This package includes @sonex/sdk-core as a dependency - you don't need to install it separately.

$3

This package requires React 16.8+ as a peer dependency:

`bash
npm install react react-dom
`

Quick Start

`tsx
import { SonexWidget, WidgetConfig } from '@sonex/sdk-browser';

function App() {
const config: WidgetConfig = {
chatbotConfig: {
apiEndpoint: 'https://your-api.com/transcribe',
sessionEndpoint: 'https://your-api.com/session',
authTokenProvider: {
getAuthToken: () => localStorage.getItem('auth_token'),
},
},
widgetTitle: 'My Assistant',
widgetSubtitle: 'How can I help you?',
position: 'bottom-right',
theme: {
primaryColor: '#007bff',
headerBackground: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
},
};

return ;
}
`

Configuration Options

$3

| Property | Type | Description |
|----------|------|-------------|
| chatbotConfig | ChatbotConfig | Required. Core chatbot configuration |
| widgetTitle | string | Title displayed in widget header |
| widgetSubtitle | string | Subtitle displayed in widget header |
| position | 'bottom-right' \| 'bottom-left' | Widget position |
| theme | Partial | Custom theme options |
| enableVoice | boolean | Enable voice input (default: true) |
| placeholder | string | Input placeholder text |
| templates | TemplateDefinition[] | Custom message templates |

$3

| Property | Type | Description |
|----------|------|-------------|
| apiEndpoint | string | Required. URL for chat API |
| sessionEndpoint | string | URL for session token endpoint |
| authTokenProvider | AuthTokenProvider | Provider for auth token (session API) |
| tokenProvider | TokenProvider | Provider for Sonex session token |
| storage | StorageConfig | Token storage strategy |

Predefined Themes

`tsx
import { SonexWidget, getTheme } from '@sonex/sdk-browser';

// Available themes: 'light', 'dark', 'professional-blue',
// 'friendly-green', 'modern-purple', 'minimal'
const config: WidgetConfig = {
chatbotConfig: { apiEndpoint: '...' },
theme: getTheme('dark'),
};
`

Custom Templates

Render custom UI for specific message types:

`tsx
const config: WidgetConfig = {
chatbotConfig: { apiEndpoint: '...' },
templates: [
{
name: 'expense-card',
matcher: (data) => data?.parameters?.amount !== undefined,
component: ExpenseCardTemplate,
},
],
};
`

Documentation

For comprehensive documentation, see the Integration Guide.

Related Packages

- @sonex/sdk-core - Core services (included as dependency)
- @sonex/sdk-node` - Server-side utilities

License

MIT