npm package: @sonex/sdk-browser
Description: React chatbot widget component for Sonex SDK - customizable, embeddable AI chat interface
Author: rijo-utsuk
Latest version: 0.1.1

# @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.

### Peer Dependencies

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 <SonexWidget config={config} />;
}
```

## Configuration Options

### WidgetConfig

| 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<SonexTheme>` | Custom theme options |
| `enableVoice` | `boolean` | Enable voice input (default: true) |
| `placeholder` | `string` | Input placeholder text |
| `templates` | `TemplateDefinition[]` | Custom message templates |

### ChatbotConfig

| 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](https://github.com/utsuk-in/sonex/blob/main/packages/sdk-core/docs/INTEGRATION_GUIDE.md).

## Related Packages

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

## License

MIT